Add a class to a <div> element:
More "Try it Yourself" examples below.
The classList property returns the class name(s) of an element, as a DOMTokenList object.
This property is useful to add, remove and toggle CSS classes on an element.
The classList property is read-only, however, you can modify it by using the add() and remove() methods.
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 |
| Property | Description |
|---|---|
| length | Returns the number of classes in the list. This property is read-only |
| Method | Description |
|---|---|
| add(class1, class2, ...) | Adds one or more class names to an element. If the specified class already exist, the class will not be added |
| contains(class) |
Returns a Boolean value, indicating whether an element has the
specified class name.
Possible values:
|
| item(index) | Returns the class name with a specified index number from an
element. Index starts at 0. Returns null if the index is out of range |
| remove(class1, class2, ...) | Removes one or more class names from an element. Note: Removing a class that does not exist, does NOT throw an error |
| toggle(class, true|false) | Toggles between a class name for an element. The first parameter removes the specified class from an element, and returns false. If the class does not exist, it is added to the element, and the return value is true. The optional second parameter is a Boolean value that forces the class to be added or removed, regardless of whether or not it already existed. For example: Remove a class: element.classList.toggle("classToRemove", false); Add a class: element.classList.toggle("classToAdd", true); Note: The second parameter is not supported in Internet Explorer or Opera 12 and earlier. |
| Return Value: | A DOMTokenList, containing a list of the class name(s) of an element |
|---|
Add multiple classes to a <div> element:
Remove a class from a <div> element:
Remove multiple classes from a <div> element:
Toggle between two classes for a <div> element:
Get the class name(s) of a <div> element:
The result of x will be:
Find out how many class names a <div> element has:
The result of x will be:
Get the first class name (index 0) of a <div> element:
The result of x will be:
Find out if an element has a "mystyle" class:
The result of x will be:
Find out if an element has a "mystyle" class. If so, remove another class name:
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
Element Object
Your message has been sent to W3Schools.