como adicionar e remover classes em JS sem jquery
Estou à procura de uma forma rápida e segura de adicionar e remover classes de um elemento html sem jQuery.
Ele também deve estar trabalhando no início IE (IE8 e up).
7 answers
As 3 funções seguintes funcionam em navegadores que não suportam classList
:
function hasClass(el, className)
{
if (el.classList)
return el.classList.contains(className);
return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}
function addClass(el, className)
{
if (el.classList)
el.classList.add(className)
else if (!hasClass(el, className))
el.className += " " + className;
}
function removeClass(el, className)
{
if (el.classList)
el.classList.remove(className)
else if (hasClass(el, className))
{
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
el.className = el.className.replace(reg, ' ');
}
}
Https://jaketrent.com/post/addremove-classes-raw-javascript/
Outra abordagem para adicionar a classe ao elemento usando JavaScript puro
Para adicionar classe:
document.getElementById("div1").classList.add("classToBeAdded");
Para remover a classe:
document.getElementById("div1").classList.remove("classToBeRemoved");
Nota: mas não suportado em IE
Por amizade futura, apoio a recomendação para classList com polifill / shim: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#wrapper
var elem = document.getElementById( 'some-id' );
elem.classList.add('some-class'); // Add class
elem.classList.remove('some-other-class'); // Remove class
elem.classList.toggle('some-other-class'); // Add or remove class
if ( elem.classList.contains('some-third-class') ) { // Check for class
console.log('yep!');
}
Adicionar & Remover As Classes (testadas no IE8+)
Adicionar guarnição () ao IE (retirado de: .trim () no JavaScript não trabalhar no IE)
if(typeof String.prototype.trim !== 'function') {
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
}
}
Adicionar e remover Classes:
function addClass(element,className) {
var currentClassName = element.getAttribute("class");
if (typeof currentClassName!== "undefined" && currentClassName) {
element.setAttribute("class",currentClassName + " "+ className);
}
else {
element.setAttribute("class",className);
}
}
function removeClass(element,className) {
var currentClassName = element.getAttribute("class");
if (typeof currentClassName!== "undefined" && currentClassName) {
var class2RemoveIndex = currentClassName.indexOf(className);
if (class2RemoveIndex != -1) {
var class2Remove = currentClassName.substr(class2RemoveIndex, className.length);
var updatedClassName = currentClassName.replace(class2Remove,"").trim();
element.setAttribute("class",updatedClassName);
}
}
else {
element.removeAttribute("class");
}
}
Utilização:
var targetElement = document.getElementById("myElement");
addClass(targetElement,"someClass");
removeClass(targetElement,"someClass");
Um JSFIDDLE funcional: http://jsfiddle.net/fixit/bac2vuzh/1/
ClassList está disponível a partir do IE10 em diante, use isso se puder.
element.classList.add("something");
element.classList.remove("some-class");
className
document.documentElement.className += " yourClassName";
Para remover a classe pode utilizar replace()
função
document.documentElement.className.replace(/(?:^|\s)yourClassName(?!\S)/,'');
Também como @DavidThomas mencionou, teria de usar o new RegExp()
construtor se quiser passar dinamicamente os nomes das classes para a função de substituição.
Quando se remove a expressão regular da equação, deixa-se um código menos" amigável", mas ainda assim pode ser feito com a (muito) forma menos elegante de split().
function removeClass(classString, toRemove) {
classes = classString.split(' ');
var out = Array();
for (var i=0; i<classes.length; i++) {
if (classes[i].length == 0) // double spaces can create empty elements
continue;
if (classes[i] == toRemove) // don't include this one
continue;
out.push(classes[i])
}
return out.join(' ');
}
Este método é muito maior do que um simples Substituição() mas pelo menos pode ser usado em navegadores mais antigos. E no caso do navegador nem sequer suportar o comando split() é relativamente fácil adicioná-lo usando protótipo.