Skip to content
Related Articles

Related Articles

HTML | DOM classList Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 11 Jul, 2022

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. 
    1. 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.
       
    2. 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. 
 

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!