JavaScript classList

JavaScript classList is a DOM property of JavaScript that allows for styling the CSS (Cascading Style Sheet) classes of an element. JavaScript classList is a read-only property that returns the names of the CSS classes. It is a property of JavaScript with respect to the other properties of JavaScript that includes style and className. The style property returns the color or other styling of the CSS class element, and className is used for returning the names of the classes used in the CSS file. However, the className and classList properties return the name of the classes that we have used in the CSS file but in different ways. The className property returns the name of the classes in the form of a string, whereas the classList property of JavaScript returns the name of the classes in the form of an array.

Here, we will take a brief discussion on JavaScript classList and also discuss its methods with their practical implementations.

Example of JavaScript classList property

Below is an example of JavaScript classList property through which we will get the class value of an element.

<html>
<body>
<h3>Click on the button to get the class value </h3></br>
<input type="button" id="btn" value="Click me" class="myClass" onclick="getClass()">
<script>
    function getClass()
    {
      var e = document.getElementById("btn");
      alert(e.classList);
    }
  </script>
</body>
</html>

The output of the above code is shown below:

JavaScript classList Property

The classList property is used for representing the value of the class elements which is a DOMTokenList object. It is a read-only property but we can modify its value by manipulating the classes used in the program. The JavaScript classList property consists of following methods through which we can perform different operations on the class elements:

add(): The add() method is used for adding one or more classes to the element.
remove(): The remove() method is used for removing one or more classes from the number of classes present in the element.
toggle(): The toggle() method is used for toggling the specified class names of an element. It means on one click the specified class gets added and on another click the class gets removed. It is known as the toggle property of an element.
replace(): The replace() method is used for replacing an existing class with a new class.
contains(): The contains() method of the JavaScript classList property is used for returning the Boolean value as an output. If the class is present, the value is returned as true otherwise false is returned.
item(): The item() method is used for displaying the name of the classes at the particular index. Thus, it returns the class name.

These are some of the methods which are used in the JavaScript classList.

We will discuss one by one.

classList.add()

The function which is used for adding one or more classes to the CSS element.

Example:

Below example shows how to add a class using classList.add() method:

<html>
<head>
<style>
    .myClass {background: red;}
  </style>
</head>
<body>
<h3> Click on the button and add the class</h3> </br>
  <input type="button" id="Btn" value="Click me" class="Class1" onclick="getClass();">
<script>
    function getClass()
    {
      var e = document.getElementById("Btn");
      e.classList.add("myClass");
    }
  </script>
</body>
</html>

In the code, when the user clicks on the button, the new class get added with the existing classes. The output after clicking on the button is shown below:

classList.remove()

The remove() function is used for removing the existing classes from the elements.

Below example shows how to remove one or more class using classlist.remove() method:

<html>
<head>
<style>
    .myClass {background: red;}
  </style>
</head>
<body>
<h3> Click on the button and remove the class </h3> </br>

  <input type="button" id="Btn" value="Click me" class="class1 myClass" onclick="getClass();">
<script>
    function getClass()
    {
      var e = document.getElementById("Btn");
      e.classList.remove("myClass");
    }
  </script>
</body>
</html>

In the above code, when the user clicks on the button, the particular specified class gets removed from the existing CSS classes. The output after clicking on the button is shown below:

Classlist.toggle()

The toggle() button is used for toggling classes to the element. It means adding a new class or removing the existing classes.

Below is an example that will make us understand how to make use of the toggle() method to add or remove classes.

Example:

<html>
<head>
<style>
    .myClass1{background: red;}
    .myClass2 {background: blue;}
</style>
</head>
<body>
<h3> Click on the button to add or remove the class</h3> </br>
  <input type="button" id="Btn" value="Click me" class="class1 myClass1" onclick="get_toggle();">
<script>
    function get_toggle()
    {
      var e = document.getElementById("Btn");
      e.classList.toggle("myClass2");
    }
  </script>
</body>
</html>

In the code, when the user clicks on the button, the class will get added or removed from the CSS classes. The output after clicking on the button is shown below:

Classlist.contains()

The contains() method is used to check whether the specified class exist in the CSS classes and with respect to it, it returns the Boolean value as true or false.

Below is an example that shows how to search for a class if it exist or not using the contains() method:

Example:

<html>
<body>
  <input type="button" id="Btn" value="Click to check" class="myClass" onclick="getClass();">
<script>
    function getClass()
    {
      var e = document.getElementById("Btn");
      document.write(e.classList.contains("myClass")+"<br>"+"myclass is the name of the class");
}
  </script>
</body>
</html>

In the above code, it is seen that when the user clicks on the button, then it checks for the specified class if present in the CSS classes. If it is present, a Boolean value as true will be returned. Else, it will return false. The output of the above code after clicking on the button is shown below:

classlist.replace()

The replace() method is used for replacing an existing class with a new one. It does not mean that the class is removed from the elements but the properties of the existing class get replaced with the properties of the new class.

Below is an example through which we will understand that how we can replace an existing class with a new class:

Example:

<html>
<head>
  <style>
    .myClass1 {background: red;}
    .myClass2 {background: blue;}
  </style>
</head>
<body>
 <input type="button" id="Btn" value="Click to replace" class="myClass1" onclick="replace_Class();">
<script>
    function replace_Class()
    {
      var e = document.getElementById("Btn");
      e.classList.replace("myClass1", "myClass2");
    }
  </script>
</body>
</html>

In the above code, when the user clicks on the button, the existing class properties get replaced with the new class properties. The output after clicking on the button is shown below:

classList.item()

The item() function is used to return the name of the class which is present at the specified index value.

Below is an example that will make us understand how to use item() method to return the value:

Example:

<html>
<body>
<h3> Click on the button to get the specified index value</h3></br>
 <input type="button" id="Btn" value="Click Me" class="myClass1 myClass2 myClass3 myClass4" onclick="get_Class();">
<script>
    function get_Class()
    {
      var e = document.getElementById("Btn");
      alert(e.classList.item(2));
    }
  </script>
</body>
</html>

In the code, when the user clicks on the button, the class present on the specified index will get displayed. After clicking on the button, we get the specified index class value, as shown below: