HTML DOM classList Property

Last Updated : 13 Jun, 2023

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>