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

const 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.
Note: Removing a class that does not exist, does NOT throw an error.
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.
replace( oldClass, newClass )
Replaces an existing class with a new class.

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");

// add or remove multiple classes using spread syntax
let cls = ["foo", "bar"];
div.classList.add(...cls); 
div.classList.remove(...cls);

// replace class "foo" with class "bar"
div.classList.replace("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
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.
Obsolete  

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 8 12 3.6 (1.9.2) 10[1] 11.50 5.1
toggle() method's second argument 24 12 24 (24) No support[2] 15 7
Multiple arguments for add() & remove() 28 12 26 (26) No support 15 7
replace() 61 ? 49 (49) No support No support No support
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0 12 1.0 (1.9.2) 10[1] 11.10 5.0
toggle method's second argument 4.4 12 24.0 (24) No support[2] ? 7.0
multiple arguments for add() & remove() 4.4 12 ? No support ? 7.0
replace() No support No support 49 (49) No support No support No support

[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.

See also