Comment ajouter et supprimer des classes dans JS sans jquery

Une autre approche pour ajouter la classe à l'élément en utilisant JavaScript pur

Pour ajouter une classe:

 document.getElementById("div1").classList.add("classToBeAdded"); 

Pour supprimer la classe:

 document.getElementById("div1").classList.remove("classToBeRemoved"); 

Remarque: mais pas pris en charge dans IE <= 9 ou Safari <= 5.0

Ajouter et supprimer des classes (testé sur IE8 +)

Ajouter trim () à IE (pris de: .trim () dans JavaScript ne fonctionnant pas dans IE )

 if(typeof String.prototype.trim !== 'function') { String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); } } 

Ajouter et supprimer des 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"); } } 

Usage:

 var targetElement = document.getElementById("myElement"); addClass(targetElement,"someClass"); removeClass(targetElement,"someClass"); 

Un JSFIDDLE de travail: http://jsfiddle.net/fixit/bac2vuzh/1/

Pour ajouter une classe sans JQuery, ajoutez simplement yourClassName à votre élément className

document.documentElement.className += " yourClassName";

Pour supprimer la classe, vous pouvez utiliser la fonction replace()

document.documentElement.className.replace(/(?:^|\s)yourClassName(?!\S)/,'');

De même que @DavidThomas a mentionné, vous devriez utiliser le new RegExp() constructeur new RegExp() si vous souhaitez passer les noms de classe dynamiquement à la fonction de remplacement.

Pour une amitié future, j'appuie la recommandation pour classList avec polyfill / 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!'); } 

ClassList est disponible depuis IE10, utilisez-le si vous le pouvez.

 element.classList.add("something"); element.classList.remove("some-class"); 

Les 3 fonctions suivantes fonctionnent dans les navigateurs qui ne prennent pas en charge 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/

Lorsque vous supprimez RegExp de l'équation, vous laissez un code moins "amical", mais cela peut toujours se faire avec la (beaucoup) façon moins élégante 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(' '); } 

Cette méthode est beaucoup plus grande qu'un simple remplacement (), mais au moins elle peut être utilisée sur les anciens navigateurs. Et dans le cas où le navigateur ne supporte même pas la commande split (), il est relativement facile de l'ajouter en utilisant un prototype.