HTML DOM classListProperty
Element ObjectExamples
Add a class to the <div> element:
Try it Yourself »
Definition and Usage
The classList property returns the class name(s) of an element, as a DOMTokenList object.
This property is used to add, remove, and toggle CSS classes on an element.
The classList property is read-only, but you can modify it using the add() and remove() methods.
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| classList | 8.0 | 10.0 | 3.6 | 5.1 | 11.5 |
Syntax
Properties
| Property | Description |
|---|---|
| length | Returns the number of classes in the class list. This property is read-only. |
Methods
| Method | Description |
|---|---|
| add(class1, class2, ...) | Adds one or more class names to an element. If the specified class name already exists, it will not be added. |
| contains(class) | Returns a boolean value, determining whether the specified class name exists. Possible values:
|
| item(index) | Returns the class name at the specified index in the element. The index starts at 0. If the index is out of range, it returns null.null |
| remove(class1, class2, ...) | Removes one or more class names from an element. Note:Removing a class name that does not exist will not cause an error. |
| toggle(class, true|false) | Toggles a class name in an element. The first parameter is the class name to be removed from the element, and returns false. If the class name does not exist, it will be added to the element, and returns true. The second parameter is optional, a boolean value used to force whether the element is to add or remove the class, regardless of whether the class name exists. For example: Remove a class:element.classList.toggle("classToRemove", false); Add a class:element.classList.toggle("classToAdd", true); Note:Internet Explorer or Opera 12 and earlier versions do not support the second parameter. |
Technical Details
| Return Value: | A DOMTokenList, containing the list of class names of the element. |
|---|
More Examples
Example
Add multiple classes to the <div> element:
Try it Yourself »
Example
Remove a class from the <div> element:
Try it Yourself »
Example
Remove multiple classes from the <div> element:
Try it Yourself »
Example
Toggle a class on the <div> element:
Try it Yourself »
Example
Get the class names of the <div> element:
var x = document.getElementById("myDIV").classList;
xThe result is:
Try it Yourself »
Example
See how many class names the <div> element has:
xThe result is:
Try it Yourself »
Example
Get the first class name (index 0) of the <div> element:
xThe result is:
Try it Yourself »
Example
Check whether the element has the "mystyle" class:
xThe result is:
Try it Yourself »
Example
Check whether the element has the "mystyle" class; if it exists, remove another class name:
if (x.classList.contains("mystyle")) {
x.classList.remove("anotherClass");
} else {
alert("Could not find it.");
}
Try it Yourself »
Related Articles
CSS Tutorial:CSS Selectors
CSS Reference:CSS .classSelectors
HTML DOM Reference:HTML DOM className Property
HTML DOM Reference:HTML DOM getElementsByClassName() Method
HTML DOM Reference:HTML DOM Style Object
Other Extensions