Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM classList Property

  • Difficulty Level : Basic
  • Last Updated : 25 Jul, 2019

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.




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




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




<!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 8.0
  • Internet Explorer 10.0
  • Firefoz 3.6
  • Opera 11.5
  • Safari 5.1

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :