YouTip element:
document.getElementById("myDIV").classList.add("mystyle");
[Try it »](#)
* * *
## Definition and Usage
The classList property returns the class names of an element, as a DOMTokenList object.
This property is used to add, remove, and toggle CSS classes in 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
_element_.classList
## 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 the element. If the specified class name already exists, it will not be added. |
| contains(_class_) | Returns a boolean, indicating whether the specified class name exists. Possible values: * true - The element already contains the class name. * false - The class name does not exist in the element. |
| 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, _null_ is returned. |
| remove(_class1, class2, ..._) | Removes one or more class names from the element. **Note:** Removing a class that does not exist will not cause an error. |
| toggle(_class,_ true|false) | Toggles a class name in the element. The first parameter is the class name to be removed from the element, and it returns false. If the class name does not exist, it will be added to the element, and it returns true. The second parameter is optional and is a boolean value used to force the addition or removal of 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 a
element:
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
[Try it »](#)
## Example
Remove a class from a
element:
document.getElementById("myDIV").classList.remove("mystyle");
[Try it »](#)
## Example
Remove multiple classes from a
element:
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");
[Try it »](#)
## Example
Toggle a class in a
element:
document.getElementById("myDIV").classList.toggle("newClassName");
[Try it »](#)
## Example
Get the class names of a
element:
I am a DIV element
var x = document.getElementById("myDIV").classList;
_x_ outputs:
mystyle anotherClass thirdClass
[Try it »](#)
## Example
Check how many class names a element has:
var x = document.getElementById("myDIV").classList.length;
_x_ outputs:
3
[Try it »](#)
## Example
Get the first class name (index 0) of a
element:
var x = document.getElementById("myDIV").classList.item(0);
_x_ outputs:
mystyle
[Try it »](#)
## Example
Check if the element has the "mystyle" class:
var x = document.getElementById("myDIV").classList.contains("mystyle");
_x_ outputs:
true
[Try it »](#)
## Example
Check if the element has the "mystyle" class, and if it does, remove another class name:
var x = document.getElementById("myDIV");
if (x.classList.contains("mystyle")) {
x.classList.remove("anotherClass");
} else {
alert("Could not find it.");
}
[Try it »](#)
* * *
## Related Articles
CSS Tutorial: (#)
CSS Reference: [CSS _.class_ Selector](#)
HTML DOM Reference: (#)
HTML DOM Reference: [HTML DOM getElementsByClassName() Method](#)
HTML DOM Reference: (#)
[ Element Object](#)