Element.classList

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

Specifications

Browser compatibility

[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

• element.className
• DOMTokenList