The Element.classList is a read-only property which returns a live DOMTokenList collection of the class attributes of the element.

Using classList is a convenient alternative to accessing an element's list of classes as a space-delimited string via element.className.

Syntax

var elementClasses = elementNodeReference.classList;

elementClasses is a DOMTokenList representing the class attribute of elementNodeReference. If the class attribute was not set or is empty elementClasses.length returns 0. element.classList itself is read-only, although you can modify it using the add() and remove() methods.

Methods

add( String [, String] )
Add specified class values. If these classes already exist in attribute of the element, then they are ignored.
remove( String [,String] )
Remove specified class values.
item ( Number )
Return class value by index in collection.
toggle ( String [, force] )
When only one argument is present: Toggle class value; i.e., if class exists then remove it and return false, if not, then add it and return true.
When a second argument is present: If the second argument evaluates to true, add specified class value, and if it evaluates to false, remove it.
contains( String )
Checks if specified class value exists in class attribute of the element.

Examples

// div is an object reference to a <div> element with class="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

//  add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );

alert(div.classList.contains("foo"));

// add or remove multiple classes
div.classList.add("foo","bar");
div.classList.remove("foo", "bar");

Versions of Firefox before 26 do not implement the use of several arguments in the add/remove/toggle methods. See https://bugzilla.mozilla.org/show_bug.cgi?id=814014

Specifications

Specification Status Comment
WHATWG HTML Living Standard
The definition of 'Element.classList' in that specification.
Living Standard Note within the HTML specification related to the class attribute.
DOM
The definition of 'Element.classList' in that specification.
Living Standard Initial definition
DOM4
The definition of 'Element.classList' in that specification.
Recommendation  

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 8.0 (Yes)[3] 3.6 (1.9.2) 10[1][3] 11.50 5.1
toggle method's second argument 24 (Yes) 24 (24) No support[2] 15 5.1
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0 1.0 (1.9.2) 10 11.10 5.0
toggle method's second argument ? 24.0 (24) ? ? ?

[1] Not supported for SVG elements.  See a report at Microsoft about that.
[2] Internet Explorer never implemented this. See a report at Microsoft about that.
[3] Internet Explorer uses only the first parameter in "add" and "remove".

 

 

See also