The classList property in JavaScript is a feature of the Document Object Model (DOM) that facilitates the manipulation of CSS (Cascading Style Sheets) classes associated with an element. This classList property is read-only and provides a collection of the names of the CSS classes applied to an element. In the context of JavaScript properties, it exists alongside style and className. The style property yields the styling attributes such as color for the CSS class element, while className is utilized to retrieve the names of the classes defined in the CSS file. Although both className and classList offer access to the class names utilized in the CSS, they do so in distinct manners. Specifically, the className property presents the class names as a string, whereas the classList property represents them in the format of an array.
In this section, we will engage in a concise exploration of the JavaScript classList property, along with an examination of its various methods and their practical applications.
Example of JavaScript classList property
The following illustrates the use of the JavaScript classList property, which allows us to retrieve the class values associated with a particular 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.
Here are several methods that are utilized within the JavaScript classList.
We will discuss one by one.
classList.add
The function utilized for appending one or several classes to a CSS element.
Example:
The following example demonstrates the procedure for incorporating a class by utilizing the 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 provided code, when the user interacts with the button by clicking it, a new class is appended to the list of existing classes. The resulting output after the button click is illustrated below:
classList.remove
The remove method is utilized to eliminate existing classes from the specified elements.
The following example illustrates the process of eliminating one or more classes by utilizing the 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 code provided, when the user interacts with the button by clicking it, the designated class is eliminated from the current set of CSS classes. The result displayed after the button is clicked is illustrated below:
Classlist.toggle
The toggle function serves the purpose of switching classes on a specified element. This indicates that it can either add a new class or eliminate one or more of the currently assigned classes.
Here is an example that illustrates how to utilize the toggle method for adding or removing 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 provided code, whenever the user clicks on the button, a specific class will either be added to or removed from the existing CSS classes. The result displayed after the button click is illustrated below:
Classlist.contains
The contains function serves the purpose of determining if a particular class is present within the CSS classes. Based on this check, it yields a Boolean outcome of either true or false.
The following example demonstrates how to check for the existence of a class by utilizing 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 code provided, it demonstrates that upon the user's click on the button, a check is performed to see if the designated class exists within the CSS classes. If the class is found, a Boolean value of true will be returned; otherwise, it will yield false. The result of the aforementioned code after the button click is illustrated below:
classlist.replace
The replace method serves the purpose of substituting an existing class with a new class. This action does not imply that the original class is eliminated from the elements; rather, the attributes of the original class are substituted with those of the new class.
The following example illustrates how we can substitute an existing class with a new one:
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 code presented above, when the button is clicked by the user, the current class attributes are substituted with the new class attributes. The resulting output after the button click is displayed below:
classList.item
The item function is utilized to retrieve the name of the class located at the designated index value.
Here is an illustration that will help us grasp the usage of the item method for retrieving 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 provided code, when the user clicks the button, the class associated with the designated index will be revealed. Upon clicking the button, we retrieve the class value corresponding to the specified index, as illustrated below:
Below are various methods associated with the classList DOM object, along with comprehensive information regarding classList.