classList in javascript

classList property in javascript

classList property is used to return the class attribute present in a particular element.

In Javascript using classList property, class attributes and there values of an element can be accessed.

Unlike className, this property has more methods.

Syntax

var variable = element.classList;

Example - Get class value of an element

Try Yourself

Example Explanation

  • In the above example we have created a button (Know my class name)
  • In the button we have set five attributes (type, id, value, class, onclick).
  • When the button is clicked, click_func Javascript function is called.
  • In the Javascript function, first we are getting the element (document.getElementById("idBtn")) and storing in elem variable.
  • In the next line we are simply displaying the class name (alert(elem.classList)).

classList Methods

Following are some of the methods used in the classList,

  • add : It is used to add a class value. If it exists, it is ignored.
  • remove : It is used to remove a specific class value.
  • item : It is used to return a class value by its index.
  • toggle : It is used to add or remove the class value. If the specified class value is present, it will be removed. If it is not present it will be added.
  • contain : It is used to check if the specified class value is present or not.
  • replace : It is used to replace a specific class value with a new one.

Example 1 - Adding new class value

Try Yourself

Example Explanation

  • In the above example we have created a button (Add extra value to the class name), and we have declared CSS property in .clsNew class.
  • In the button we have set five attributes (type, id, value, class, onclick).
  • When the button is clicked, a Javascript function (click_func()) is called.
  • In the Javascript click_func function, first we are getting the element (document.getElementById("idBtn")) and storing in elem variable.
  • In the next line we are adding a new class value using add() method (elem.classList.add("clsNew")), so clsNew is added to the existing class values.

Example 2 - Removing class value

Try Yourself

Example Explanation

  • In the above example we have created a button (Add extra value to the class name), and we have declared CSS property in .clsNew class.
  • In the button we have set five attributes (type, id, value, class, onclick).
  • Button has two class values ("clsBtn", "clsNew").
  • When the button is clicked click_func function is called.
  • In the Javascript function, first we are getting the element (document.getElementById("idBtn")) and storing in elem variable.
  • In the next line we are removing the class value using remove() method (elem.classList.remove("clsNew"), So the background color of the button returns to normal.

Example 3 - Showing class value using the index

Try Yourself

Example Explanation

  • In the above example we have created a button (Show class value).
  • In the button we have set five attributes (type, id, value, class, onclick).
  • Button has two class values ("clsBtn", "clsNew").
  • When the button is clicked, click_func function is called.
  • In the Javascript function, first we are getting the element (document.getElementById("idBtn")) and storing it in elem variable. Class values will be stored in an array format.
  • In the next line we are retrieving the class value in second position in array using item() method and specifying the index position (alert(elem.classList.item(1))).

Example 4 - Adding a new or Remove existing class value

Try Yourself

Example Explanation

  • In the above example we have created a button (Add or Remove Class Value), and we have declared css properties for css class (.clsNew1, .clsNew2).
  • In the button we have set five attributes (type, id, value, class, onclick).
  • Button has two class values ("clsBtn", "clsNew1").
  • When the button is clicked, click_func function is called.
  • In the Javascript function, first we are getting the element (document.getElementById("idBtn");) and storing in elem variable.
  • In the next line we use the toggle method, in it we specify .clsNew2. Since the value is present, that particular value will be removed from the class.
  • When the above line is executed, the border size, style and color of the button returns to normal.

Example 5 - Check for existing class value

Try Yourself

Example Explanation

  • In the above example we have created a button (Check for Class Value).
  • In the button we have set five attributes (type, id, value, class, onclick).
  • Button has two class values ("clsBtn", "clsNew").
  • When the button is clicked, click_func function is called.
  • In the Javascript function, first we are getting the element (document.getElementById("idBtn")) and storing it in elem variable.
  • In the next line we use the contains method, in it we specify .clsNew. Since the value is present, it returns true and it is displayed (alert(elem.classList.contains("clsNew"))).

Example 6 - Replace an existing class value

Try Yourself

Example Explanation

  • In the above example we have created a button (Replace a Class Value), and we have declared css properties for css class (.clsNew1, .clsNew2).
  • In the button we have set five attributes (type, id, value, class, onclick).
  • Button has two class values ("clsBtn", "clsNew1").
  • For .clsNew1 class we set the background color as Red.
  • For .clsNew2 class we set the background color as Green.
  • When the button is clicked, click_func function is called.
  • In the Javascript function, first we are getting the element (document.getElementById("idBtn")) and storing it in elem variable.
  • In the next line we use the replace() method, in it first we specify .clsNew1 which is to be replaced, and second we specify .clsNew2 which is to be added.
  • When the above line is executed, the background color turn to green.