W3cubDocs

/DOM

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

// 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()`	24	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