Remover a classe CSS do elemento com JavaScript (sem jQuery) [duplicado]
- mudar a classe de um elemento com JavaScript 25 respostas
13 answers
A forma correcta e normal de o fazer é usando classList
. Ele é agora amplamente suportado na última versão dos navegadores mais modernos:
ELEMENT.classList.remove("CLASS_NAME");
Documentação: https://developer.mozilla.org/en/DOM/element.classList
document.getElementById("MyID").className =
document.getElementById("MyID").className.replace(/\bMyClass\b/,'');
Onde MyID
está o ID do elemento e a minha classe é o nome da classe que deseja remover.
Actualização: Para suportar nomes de classes que contenham caracteres de traço, como" minha-classe", use
document.getElementById("MyID").className =
document.getElementById("MyID").className
.replace(new RegExp('(?:^|\\s)'+ 'My-Class' + '(?:\\s|$)'), ' ');
Aqui está uma maneira de assar esta funcionalidade em todos os elementos DOM:
HTMLElement.prototype.removeClass = function(remove) {
var newClassName = "";
var i;
var classes = this.className.split(" ");
for(i = 0; i < classes.length; i++) {
if(classes[i] !== remove) {
newClassName += classes[i] + " ";
}
}
this.className = newClassName;
}
function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
div.classList.add("foo");
div.classList.remove("foo");
Mais a https://developer.mozilla.org/en-US/docs/Web/API/element.classList
Editar
Está bem, volta a escrever. Já passou algum tempo, aprendi um pouco e os comentários ajudaram.Node.prototype.hasClass = function (className) {
if (this.classList) {
return this.classList.contains(className);
} else {
return (-1 < this.className.indexOf(className));
}
};
Node.prototype.addClass = function (className) {
if (this.classList) {
this.classList.add(className);
} else if (!this.hasClass(className)) {
var classes = this.className.split(" ");
classes.push(className);
this.className = classes.join(" ");
}
return this;
};
Node.prototype.removeClass = function (className) {
if (this.classList) {
this.classList.remove(className);
} else {
var classes = this.className.split(" ");
classes.splice(classes.indexOf(className), 1);
this.className = classes.join(" ");
}
return this;
};
Antigo Posto
Estava a trabalhar com uma coisa destas. Eis uma solução que encontrei...
// Some browsers don't have a native trim() function
if(!String.prototype.trim) {
Object.defineProperty(String.prototype,'trim', {
value: function() {
return this.replace(/^\s+|\s+$/g,'');
},
writable:false,
enumerable:false,
configurable:false
});
}
// addClass()
// first checks if the class name already exists, if not, it adds the class.
Object.defineProperty(Node.prototype,'addClass', {
value: function(c) {
if(this.className.indexOf(c)<0) {
this.className=this.className+=' '+c;
}
return this;
},
writable:false,
enumerable:false,
configurable:false
});
// removeClass()
// removes the class and cleans up the className value by changing double
// spacing to single spacing and trimming any leading or trailing spaces
Object.defineProperty(Node.prototype,'removeClass', {
value: function(c) {
this.className=this.className.replace(c,'').replace(' ',' ').trim();
return this;
},
writable:false,
enumerable:false,
configurable:false
});
Agora podes ligar.myElement.removeClass('myClass')
Ou acorrentá-lo: myElement.removeClass("oldClass").addClass("newClass");
document.getElementById("whatever").classList.remove("className");
Tenta:
function removeClassName(elem, name){
var remClass = elem.className;
var re = new RegExp('(^| )' + name + '( |$)');
remClass = remClass.replace(re, '$1');
remClass = remClass.replace(/ $/, '');
elem.className = remClass;
}
var element = document.getElementById('example_id');
var remove_class = 'example_class';
element.className = element.className.replace(' ' + remove_class, '').replace(remove_class, '');
Todas estas respostas são muito complicadas, tente
var string = "Hello, whats on your mind?";
var new_string = string.replace(', whats on your mind?', '');
O resultado seria um retorno da cadeia
Hello
Muito fácil. Os créditos vão para jondavidjohn remover a parte do texto no Javascript
Uso este código de excerto JS:
Em primeiro lugar, chego a todas as classes, depois, de acordo com o índice da minha classe alvo, estabeleço o nome da classe = "".
Target = document.getElementsByClassName("yourClass")[1];
Target.className="";
Também há$.toggleClass
, $.addClass
, e $.removeClass
Para documentação, dê uma olhada em http://api.jquery.com/toggleClass/.
Dê uma olhada neste exemplojsFiddle para vê-lo em ação.
document.getElementById("whatever").className += "classToKeep";
Com o sinal de mais ( ' + ' ) a adicionar a classe em vez de substituir quaisquer classes existentes