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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output :

  • Before adding a class

  • After clicking on add class button

  • After clicking on remove class button

Example-2: Toggling between classes

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output :

  • Before toggle

  • After toggle

Example-3:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output :

  • Before click

  • After click

Supported Browser: The browsers supported by DOM classList Property are listed below:

  • Google Chrome 8.0
  • Internet Explorer 10.0
  • Firefoz 3.6
  • Opera 11.5
  • Safari 5.1


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : ashishsaini3



Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.