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.
Syntax
const elementClasses = elementNodeReference.classList;NOTE: The classList property is not supported in IE9 and earlier.Â
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.
Example 1:Adding and removing a class.Â
<!--Driver Code Starts-->
<!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>
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
Example 2: Toggling between classes Â
<!--Driver Code Starts-->
<!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>
<!--Driver Code Ends-->
<button onclick="myFunction()">
toggle
</button>
<div id="myDIV" class="mystyle">
GeeksforGeeks
</div>
<script>
function myFunction() {
document.getElementById(
"myDIV").classList.toggle("newClassName");
}
</script>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
Example 3:Â Â
<!--Driver Code Starts-->
<!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>
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
- element.classList gives you a special token list object (not a plain string or array) that represents the elementâs classes. You can use convenient methods like add(), remove(), toggle(), contains(), and replace() to manipulate classes without manually parsing space-separated strings.
- While element.className works with a single space-delimited string, classList lets you add/remove individual classes safely without worrying about accidental duplicates or messing up the entire class string. It is the preferred approach for almost all class manipulation in modern JavaScript.
