HTML DOM classList property
Examples
For the <div> element to add class:
try it"
Definition and Usage
classList property returns the class name of the element, as DOMTokenList object.
This property is used in the element to add, remove, and toggle CSS class.
classList property is read-only, but you can use the add () and remove () method to modify it.
Browser Support
Figures in the table represent the first browser to support the property version number.
Attributes | |||||
---|---|---|---|---|---|
classList | 8.0 | 10.0 | 3.6 | 5.1 | 11.5 |
grammar
Properties
Attributes | Description |
---|---|
length | Returns the number of the class list class This property is read-only |
method
method | description |
---|---|
add (class1, class2, ...) | Add one or more class names in the element. If the specified class name already exists, it will not add / td> |
contains (class) | Returns a Boolean value, it is determined whether the presence of the specified class name. Possible values:
|
item (index) | Returns the class name in the element index value. Index values start from zero. If the index value is out of range of range or null |
remove (class1, class2, ...) | Remove one or more elements of the class name. Note: Removing the class name does not exist, does not complain. |
toggle (class, true | false) | Switching class names in the element. The first parameter is the name of the class you want to remove the element and returns false. If the class name does not exist, it will add the class names in the element, and returns true. The second is an optional parameter is a Boolean value that is used to set whether the element is mandatory to add or remove categories, regardless of the class name exists. E.g: 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 Description
return value: | A DOMTokenList, class name list contains elements |
---|
More examples
Examples
For the <div> element to add more categories:
try it"
Examples
Remove a class for the <div> element:
try it"
Examples
For the <div> element to remove multiple classes:
try it"
Examples
For the <div> element to switch categories:
try it"
Examples
Get the class name <div> element:
var x = document.getElementById ( "myDIV" ) .classList;
x The output is:
try it"
Examples
See <div> element has a number of class names:
x The output is:
try it"
Examples
Get <div> element in a first class name (index 0):
x The output is:
try it"
Examples
See element exists "mystyle" category:
x The output is:
try it"
Examples
See element exists "mystyle" category, if present remove another class name:
if (x.classList.contains ( "mystyle") ) {
x.classList.remove ( "anotherClass");
} Else {
alert ( "Could not find it. ");
}
try it"
related articles
CSS tutorial: CSS selectors
CSS Reference: CSS selectors .class
HTML DOM Reference Manual: HTML DOM className attribute
HTML DOM Reference Manual: HTML DOM getElementsByClassName () method
HTML DOM Reference Manual: HTML DOM Style Object