HTML DOM classList Property
The classList Property is a read-only property. This property uses “classList.length” property which returns the class names of the element in the form of DOMTokenlist(set of space-separated tokens). However, this property is to use add, remove and toggle CSS classes on an element.
NOTE: The classList property is not supported in IE9 and earlier.
Syntax:
const elementClasses = elementNodeReference.classList;
Method:
- add(class1, class2, …) : Adds one more class to an element. If above class already exist in the element’s class attribute they are ignored.
- remove(class1, class2, …) : Removes the specified class from element. Class which does not exist does not throw an error.
- contains(class) : Checks whether the specified class value exists in the element’s class attribute. Returns boolean value accordingly.
- item(index) : This returns the class value by index in the collection of classes. If the index is out of range it returns null.
- toggle(class, force) : Toggles between a class name for an element.
- The first parameter removes specified class from an element and returns false. If the class does not exist, it adds class to the element, and the return true.
- The optional second parameter is a Boolean value that forces the class to be added or removed. When a second parameter is present & evaluates to true, add the specified class value, and if it evaluates to false, it forces to removes the specified class whether it exists or not.
- The first parameter removes specified class from an element and returns false. If the class does not exist, it adds class to the element, and the return true.
Example-1:Adding and removing a class.
html
<!DOCTYPE html> < html > < head > < title > HTML | DOM classList Property </ title > < style > .mystyle { align: center; border: 1px solid black; height: 100px; padding-top: 35px; background: lightgreen; color: Black; font-size: 70px; } </ style > </ head > < body > < p > Click the buttons to see the add and remove of "mystyle" class to DIV. </ p > < button onclick = "myFunction()" > Add class </ button > < div id = "myDIV" > w3wiki </ div > < script > function myFunction() { document.getElementById( "myDIV").classList.add("mystyle"); } function Remove() { document.getElementById( "myDIV").classList.remove("mystyle"); } </ script > < button onclick = "Remove()" >Remove class</ button > </ body > </ html > |
Output :
- Before adding a class
- After clicking on add class button
- After clicking on remove class button
Example-2: Toggling between classes
html
<!DOCTYPE html> < html > < head > < title > HTML | DOM classList Property </ title > < style > .mystyle { align: center; border: 1px solid black; height: 100px; padding-top: 35px; background: lightgreen; color: Black; font-size: 70px; } .newClassName { align: center; border: 1px solid black; height: 50px; padding-top: 35px; background: green; color: white; font-size: 50px; } </ style > </ head > < body > < p > Click the buttons to see the add and remove of "mystyle" class to DIV. </ p > < button onclick = "myFunction()" > toggle </ button > < div id = "myDIV" class = "mystyle" > w3wiki </ div > < script > function myFunction() { document.getElementById( "myDIV").classList.toggle("newClassName"); } </ script > </ body > </ html > |
Output :
- Before toggle
- After toggle
Example-3:
html
<!DOCTYPE html> < html > < head > < title > HTML | DOM classList Property </ title > < style > .mystyle { width: 500px; height: 50px; } .anotherClass { background-color: lightGreen; } .thirdClass { text-align: center; font-size: 25px; color: black; margin-bottom: 10px; } </ style > </ head > < body > < div id = "myDIV" class = "mystyle anotherClass thirdClass" > w3wiki </ div > < button onclick = "myFunction()" > click to count the classes </ button > < p id = "demo" ></ p > < script > function myFunction() { var x = document.getElementById( "myDIV").classList.length; document.getElementById("demo").innerHTML = x; } </ script > </ body > </ html > |
Output :
- Before click
- After click
Supported Browser: The browsers supported by DOM classList Property are listed below:
- Google Chrome 22.0 and above
- Edge 16.0 and above
- Internet Explorer 10.0 and above
- Firefox 3.6 and above
- Opera 11.5 and above
- Safari 7.0 and above
Contact Us