How to add / remove a class in JavaScript?

Question

Since element.classList not supported in IE 9 and Safari-5, what is an alternative cross-browser solution?

No frame , please.

The solution should work at least IE 9 , Safari 5 , FireFox 4, Opera 11.5 and Chrome.

Related messages (but no solution):

• how to add and remove css class

• Add and remove a class with animation

• Add remove class?

Answer 1

One way to play with classes without frameworks / libraries is to use the Element.className property, which "gets and sets the value of the class attribute of the specified element." (from the MDN documentation ).
Since @ matías-fidemraizer is already mentioned in his answer, once you get the class string for your element, you can use any string-related methods to change it.

Here is an example:
Assuming you have a div with the identifier "myDiv" and that you want to add the "main__section" class to it when the user clicks on it,

 window.onload = init; function init() { document.getElementById("myDiv").onclick = addMyClass; } function addMyClass() { var classString = this.className; // returns the string of all the classes 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 } 

Answer 2

Here is the solution for addClass, removeClass, hasClass in a pure javascript solution.

This is actually from http://jaketrent.com/post/addremove-classes-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,' '); } } 

Answer 3

I just wrote them:

 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; } 

I think they will work in all browsers.

Answer 4

The simplest element.classList that has methods remove(name) , add(name) , toggle(name) and contains(name) and is now supported by all major browsers .

For older browsers, you change element.className . Here are two helpers:

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

Answer 5

Read this article on the Mozilla Developer Network:

• https://developer.mozilla.org/en/DOM/element.className

Since the element.className property has a type string, you can use the usual functions of String objects found in any JavaScript implementation:

• If you want to add a class, first use String.indexOf to check if the class is present in className . If it is missing, just connect the empty character and the new class name with this property. If he is present, do nothing.

• If you want to remove the class, just use String.replace , replacing "[className]" with an empty string. Finally, use String.trim to remove the empty characters at the beginning and end of element.className .

Answer 6

Fixed solution from @Paulpro

• Do not use "class" as this is a reserved word
• removeClass function was broken since it was listened after reuse.

`

 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; } 

Answer 7

Look at them:

1. Delete class:

    element.classList.remove('hidden'); 

2. Switch a class (adds a class if it is not already present and deletes it if it is)

    element.classList.toggle('hidden'); 

All this! I did a test - 10,000 iterations. 0.8s.

Answer 8

Decision -

Shim .classList :

Use DOM-shim or use Eli Gray Litter below

Disclaimer: I believe that support for 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 toString() // on non-DOMExceptions. Error 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)); } 

Answer 9

 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(' '); } 

Answer 10

Just in case, if someone wants to have prototype functions created for elements, this is what I use when I need to manipulate classes of different objects:

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

Use them as: document.body.addClass('whatever') or document.body.removeClass('whatever')

Instead of a body, you can also use any other element (div, span, you name it)

Answer 11

Improved version of emil code (with 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(); } } 

Answer 12

add css classes: cssClassesStr += cssClassName;

remove css classes: cssClassStr = cssClassStr.replace(cssClassName,"");

add the attribute "Classes": object.setAttribute("class", ""); //pure addition of this attribute object.setAttribute("class", ""); //pure addition of this attribute

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

Answer 13

Easy to understand:

 // Add class DOMElement.className += " one"; // Example: // var el = document.body; // el.className += " two" // Remove class function removeDOMClass(element, className) { var oldClasses = element.className, oldClassesArray = oldClasses.split(" "), newClassesArray = [], newClasses; // Sort var currentClassChecked, i; for ( i = 0; i < oldClassesArray.length; i++ ) { // Specified class will not be added in the new array currentClassChecked = oldClassesArray[i]; if( currentClassChecked !== className ) { newClassesArray.push(currentClassChecked); } } // Order newClasses = newClassesArray.join(" "); // Apply element.className = newClasses; return element; } // Example: // var el = document.body; // removeDOMClass(el, "two") 

https://gist.github.com/sorcamarian/ff8db48c4dbf4f5000982072611955a2