Come aggiungere / rimuovere una class in JavaScript?

Poiché element.classList non è supportato in IE 9 e Safari-5, qual è una soluzione cross-browser alternativa?

Nessuna struttura per favore.

La soluzione deve funzionare almeno in IE 9 , Safari 5 , FireFox 4, Opera 11.5 e Chrome.

Post correlati (ma non contengono soluzioni):

  1. come aggiungere e rimuovere la class css

  2. Aggiungi e rimuovi una class con animazione

  3. Aggiungi rimuovere class?

Un modo per giocare con le classi senza framework / librerie sarebbe usare la proprietà Element.className, che ” ottiene e imposta il valore dell’attributo di class dell’elemento specificato. ” (Dalla documentazione di MDN ).
Come @ matías-fidemraizer già menzionato nella sua risposta, una volta ottenuta la stringa di classi per il tuo elemento puoi usare qualsiasi metodo associato con le stringhe per modificarlo.

Ecco un esempio:
Supponendo che tu abbia un div con l’ID “myDiv” e che tu voglia aggiungere ad esso la class “main__section” quando l’utente fa clic su di esso,

 window.onload = init; function init() { document.getElementById("myDiv").onclick = addMyClass; } function addMyClass() { var classString = this.className; // returns the string of all the classs for myDiv var newClass = classString.concat(" main__section"); // Adds the class "main__section" to the string (notice the leading space) this.className = newClass; // sets className to the new string } 

Ecco la soluzione per addClass, removeClass, hasClass in pura soluzione javascript.

In realtà è da http://jaketrent.com/post/addremove-classs-raw-javascript/

 function hasClass(ele,cls) { return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); } function addClass(ele,cls) { if (!hasClass(ele,cls)) ele.className += " "+cls; } function removeClass(ele,cls) { if (hasClass(ele,cls)) { var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); ele.className=ele.className.replace(reg,' '); } } 

Ho appena scritto questi:

 function addClass(el, classNameToAdd){ el.className += ' ' + classNameToAdd; } function removeClass(el, classNameToRemove){ var elClass = ' ' + el.className + ' '; while(elClass.indexOf(' ' + classNameToRemove + ' ') !== -1){ elClass = elClass.replace(' ' + classNameToRemove + ' ', ''); } el.className = elClass; } 

Penso che funzioneranno in tutti i browser.

Il più semplice è element.classList che ha i element.classList remove(name) , add(name) , toggle(name) e contains(name) ed è ora supportato da tutti i principali browser .

Per i browser meno recenti si modifica element.className . Ecco due aiutanti:

 function addClass(element, className){ element.className += ' ' + className; } function removeClass(element, className) { element.className = element.className.replace( new RegExp('( |^)' + className + '( |$)', 'g'), ' ').trim(); } 

Leggi questo articolo sulla rete per sviluppatori Mozilla:

Poiché la proprietà element.className è di tipo string, è ansible utilizzare le normali funzioni degli oggetti String presenti in qualsiasi implementazione JavaScript:

  • Se si desidera aggiungere una class, utilizzare prima String.indexOf per verificare se la class è presente in className . Se non è presente, concatena un carattere vuoto e il nuovo nome di class a questa proprietà. Se è presente, non fare nulla.

  • Se vuoi rimuovere una class, usa String.replace , sostituendo “[className]” con una stringa vuota. Infine usa String.trim per rimuovere i caratteri vuoti all’inizio e alla fine di element.className .

Risolta la soluzione da @Paulpro

  1. Non utilizzare “class”, poiché è una parola riservata
  2. removeClass funzione removeClass stata interrotta poiché è stata messa in removeClass dopo un uso ripetuto.

`

 function addClass(el, newClassName){ el.className += ' ' + newClassName; } function removeClass(el, removeClassName){ var elClass = el.className; while(elClass.indexOf(removeClassName) != -1) { elClass = elClass.replace(removeClassName, ''); elClass = elClass.trim(); } el.className = elClass; } 

La soluzione è

Shim .classList :

Utilizzare il DOM-shim o utilizzare lo spessore di Eli Grey in basso

Disclaimer: Credo che il supporto sia FF3.6 +, Opera10 +, FF5, Chrome, IE8 +

 /* * classList.js: Cross-browser full element.classList implementation. * 2011-06-15 * * By Eli Grey, http://eligrey.com * Public Domain. * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK. */ /*global self, document, DOMException */ /*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/ if (typeof document !== "undefined" && !("classList" in document.createElement("a"))) { (function (view) { "use strict"; var classListProp = "classList" , protoProp = "prototype" , elemCtrProto = (view.HTMLElement || view.Element)[protoProp] , objCtr = Object , strTrim = String[protoProp].trim || function () { return this.replace(/^\s+|\s+$/g, ""); } , arrIndexOf = Array[protoProp].indexOf || function (item) { var i = 0 , len = this.length ; for (; i < len; i++) { if (i in this && this[i] === item) { return i; } } return -1; } // Vendors: please allow content code to instantiate DOMExceptions , DOMEx = function (type, message) { this.name = type; this.code = DOMException[type]; this.message = message; } , checkTokenAndGetIndex = function (classList, token) { if (token === "") { throw new DOMEx( "SYNTAX_ERR" , "An invalid or illegal string was specified" ); } if (/\s/.test(token)) { throw new DOMEx( "INVALID_CHARACTER_ERR" , "String contains an invalid character" ); } return arrIndexOf.call(classList, token); } , ClassList = function (elem) { var trimmedClasses = strTrim.call(elem.className) , classes = trimmedClasses ? trimmedClasses.split(/\s+/) : [] , i = 0 , len = classes.length ; for (; i < len; i++) { this.push(classes[i]); } this._updateClassName = function () { elem.className = this.toString(); }; } , classListProto = ClassList[protoProp] = [] , classListGetter = function () { return new ClassList(this); } ; // Most DOMException implementations don't allow calling DOMException's toString() // on non-DOMExceptions. Error's toString() is sufficient here. DOMEx[protoProp] = Error[protoProp]; classListProto.item = function (i) { return this[i] || null; }; classListProto.contains = function (token) { token += ""; return checkTokenAndGetIndex(this, token) !== -1; }; classListProto.add = function (token) { token += ""; if (checkTokenAndGetIndex(this, token) === -1) { this.push(token); this._updateClassName(); } }; classListProto.remove = function (token) { token += ""; var index = checkTokenAndGetIndex(this, token); if (index !== -1) { this.splice(index, 1); this._updateClassName(); } }; classListProto.toggle = function (token) { token += ""; if (checkTokenAndGetIndex(this, token) === -1) { this.add(token); } else { this.remove(token); } }; classListProto.toString = function () { return this.join(" "); }; if (objCtr.defineProperty) { var classListPropDesc = { get: classListGetter , enumerable: true , configurable: true }; try { objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); } catch (ex) { // IE 8 doesn't support enumerable:true if (ex.number === -0x7FF5EC54) { classListPropDesc.enumerable = false; objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); } } } else if (objCtr[protoProp].__defineGetter__) { elemCtrProto.__defineGetter__(classListProp, classListGetter); } }(self)); } 

Guarda questi oneliner:

  1. Rimuovi class:

     element.classList.remove('hidden'); 
  2. Attiva / distriggers la class (aggiunta a className se non è così di class e rimossa se lo è)

     element.classList.toggle('hidden'); 

Tutto! Sto facendo un test – 10000 iterazioni. 0.8s.

 function addClass(element, classString) { element.className = element .className .split(' ') .filter(function (name) { return name !== classString; }) .concat(classString) .join(' '); } function removeClass(element, classString) { element.className = element .className .split(' ') .filter(function (name) { return name !== classString; }) .join(' '); } 

Nel caso in cui se qualcuno volesse avere funzioni prototipo costruite per elementi, questo è quello che uso quando ho bisogno di manipolare classi di oggetti diversi:

 Element.prototype.addClass = function (classToAdd) { var classs = this.className.split(' ') if (classs.indexOf(classToAdd) === -1) classs.push(classToAdd) this.className = classs.join(' ') } Element.prototype.removeClass = function (classToRemove) { var classs = this.className.split(' ') var idx =classs.indexOf(classToRemove) if (idx !== -1) classs.splice(idx,1) this.className = classs.join(' ') } 

Usali come: document.body.addClass('whatever') o document.body.removeClass('whatever')

Invece del corpo puoi anche usare qualsiasi altro elemento (div, span, lo chiami)

Versione migliorata del codice di emil (con trim ())

 function hasClass(ele,cls) { return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); } function addClass(ele,cls) { if (!hasClass(ele,cls)) ele.className = ele.className.trim() + " " + cls; } function removeClass(ele,cls) { if (hasClass(ele,cls)) { var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); ele.className = ele.className.replace(reg,' '); ele.className = ele.className.trim(); } } 

aggiungi classi css: cssClassesStr += cssClassName;

rimuovere classi css: cssClassStr = cssClassStr.replace(cssClassName,"");

aggiungi l’attributo ‘Classes’: object.setAttribute("class", ""); //pure addition of this attribute object.setAttribute("class", ""); //pure addition of this attribute

remove attribute: object.removeAttribute("class");