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