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

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

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.
[3] Internet Explorer uses only the first parameter in "add" and "remove".

See also

• element.className
• DOMTokenList;