JavaScript History Object HTML DOM Element Object

HTML DOM classList attribute

classListThe read-only property returns the real-time DOMTokenList collection of the element's class attribute.

The classList property is very useful for adding, removing, and toggling CSS classes on elements.

This property is read-only, although you can modify it using the add() and remove() methods.

Using classList is a convenient alternative method, which canclassNameAccess the element's class list with a space-separated string.

Syntax:

element.classList

Example

var elem = document.getElementById("x");
elem.classList.add("para");

Test and see‹/›

Browser compatibility

The number in the table specifies the first browser version that fully supports the classList attribute:

Property
classList	8	3.6	Is	5.1	10

Nature

Property	Description
length	Returns the number of classes in the list

Method

Method	Description
add(class1, class2, ...)	Add one or more class names to the element. If the specified class already exists in the element's class attribute, it will not add the class.
contains(class)	Check if the specified class value exists in the element's class attribute. Possible values: true-The element contains the specified class name false-The element does not contain the specified class name
item(index)	Returns the class value from the index in the set. The index starts from 0. If the index is out of range, it will returnnull.
remove(class1, class2, ...)	Remove one or more class names from the element. Note:Deleting a non-existent class will not cause an error.
replace(oldClass, newClass)	Replace the existing class with a new class.
toggle(class, true\|false)	Toggle between the element's class names. When only one parameter exists: toggle the value of the class; otherwise, return 0. That is, if the class exists, delete it and return false, if it does not exist, add it and return true. When an optional second parameter exists: if the value of the second parameter is true, add the specified class value; if the value of the second parameter is false, remove it. Example: 　　　　　 Remove a class:element .classList.toggle("classToRemove", false); 　 Add a class:element .classList.toggle("classToAdd", true);

Technical Details

Return value:	DOMTokenList, a list containing the element's class names
DOM Version:	DOM Level1

More examples

Add multiple classes to the element:

Example

var elem = document.getElementById("x");
elem.classList.add("para", "shadow");

Test and see‹/›

Remove a single class from the element:

Example

var elem = document.getElementById("x");
elem.classList.remove("para");

Test and see‹/›

Remove multiple classes from the element:

Example

var elem = document.getElementById("x");
elem.classList.remove("para", "shadow");

Test and see‹/›

Toggle the element between two classes:

Example

var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");

Test and see‹/›

Return the class names that the element has:

Example

var len = document.getElementById("x").classList.length;

Test and see‹/›

Return the class names of the element:

Example

var name = document.getElementById("x").classList;

Test and see‹/›

Return the first class name of the element (index 0):

Example

var name = document.getElementById("x").classList[0];

Test and see‹/›

Use the item() method to return the first class name of the element (index 0):

Example

var name = document.getElementById("x").classList.item(0);

Test and see‹/›

Check if the element has the "shadow" class:

Example

var list = document.getElementById("x").classList;
if (list.contains("shadow")) {}}
alert("Yes!!! The P element contains 'shadow' class");
} else {
alert("No 'shadow' class found");　　　
}

Test and see‹/›

Toggle a class ("open") to create a side navigation button: