HTML DOM classList
Property
Example
Add a class to a <div>
element:
document.getElementById("myDIV").classList.add("mystyle");
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 | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
classList | 8.0 | 10.0 | 3.6 | 5.1 | 11.5 |
Syntax
Properties
Property | Description |
---|---|
length | Returns the number of classes in the list. <br><br>This property is read-only. |
Methods
Method | Description | |
---|---|---|
add(class1, class2, ...) | Adds one or more class names to an element. <br><br>If the specified class already exists, it will not be added. | |
contains(class) | Returns a boolean value indicating whether an element has the specified class name. Possible values: true - The element has the class name. <br>false - The element does not have the class name. | |
item(index) | Returns the class name at the specified index. Index starts at 0. <br><br>If the index is out of range, it returns null. | |
remove(class1, class2, ...) | Removes one or more class names from an element. <br><br>Note: Removing a non-existing class name will not throw an error. | |
toggle(class, true | false) | Toggles a class name on an element. <br><br>The first parameter is the class name to be removed from the element and returns false. <br>If the class name does not exist, it will be added to the element and returns true. <br><br>The second parameter is optional and is a boolean value that forces the addition or removal of the class, regardless of its existence. For example: <br><br>Remove a class: element.classList.toggle("classToRemove", false); <br>Add a class: element.classList.toggle("classToAdd", true); <br><br>Note: Internet Explorer or Opera 12 and earlier do not support the second parameter. |
Technical Description
| Return Value: | A DOMTokenList
, containing the list of class names for the element. |
| --- | --- |
More Examples
Example
Add multiple classes to a <div>
element:
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
Example
Remove a class from a <div>
element:
document.getElementById("myDIV").classList.remove("mystyle");
Example
Remove multiple classes from a <div>
element:
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");
Example
Toggle a class on a <div>
element:
document.getElementById("myDIV").classList.toggle("newClassName");
Example
Get the class names of a <div>
element:
<div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>
var x = document.getElementById("myDIV").classList;
x output is:
mystyle anotherClass thirdClass
Example
Get the number of classes on a <div>
element:
var x = document.getElementById("myDIV").classList.length;
x output is:
3
Example
Get the first class name (index 0) of a <div>
element:
var x = document.getElementById("myDIV").classList.item(0);
x output is:
mystyle
Example
Check if a <div>
element has the "mystyle" class:
var x = document.getElementById("myDIV").classList.contains("mystyle");
x output is:
true
Example
Check if a <div>
element has the "mystyle" class, and if so, remove another class:
var x = document.getElementById("myDIV");
if (x.classList.contains("mystyle")) {
x.classList.remove("anotherClass");
} else {
alert("Could not find it.");
}
Related Articles
CSS Tutorial: CSS Selectors
CSS Reference: CSS .class Selector
HTML DOM Reference: HTML DOM className Property
HTML DOM Reference: HTML DOM getElementsByClassName() Method
HTML DOM Reference: HTML DOM Style Object