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">
GeeksforGeeks
</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">
GeeksforGeeks
</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">
GeeksforGeeks
</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