Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM classList Property
The HTML DOM classList property is used to return the class names associated with an HTML element. It returns the class names in the form of a DOMTokenlist . The DOMTokenlist is nothing but a set of space-seperated tokens. This property is useful in adding, removing or toggling css classes of an element.
The classList property is a read-only property but you can add or remove classes of an element using the add() and remove() method.
Properties
Following is the property of classList −
| Property | Description |
|---|---|
| Length | To return the number of classes in the list. It is read-only. |
Methods
Following are the methods of classList −
| Method | Description |
|---|---|
| add(class1, class2, class 3...) | To add one or more class name to an element. If the given class already exist, it will not be added. |
| contains(class) | To return a Boolean value showing if an element has the given class name. True means the element contains the specified class name while false means it the class name is not contained in the element. |
| item(index) | To return the class name with a given index number from an element. Indexing starts at 0 and will return null if the index is out of range. |
| remove(class1, class2 class 3, ...) | To remove one or more class names from an element. If the class specified in remove doesn’t exist it will not throw an error. |
| toggle(class, true|false) | To toggle between a class name for an element. The first parameter adds a class to the element doesn’t exist and returns true while if the class does exist is simply removes it from the element and returns false.The second parameter is an optional one that takes a Boolean value and forces the given class to be added or removed. It doesn’t care if it existed earlier or not. |
Syntax
Following is the syntax for classList property −
element.classList
Example
Let us see an example of HTML DOM classList property −
<!DOCTYPE html>
<html>
<head>
<style>
.firstDiv {
width: 200px;
height: 200px;
padding: 15px;
border: 1px double blue;
position:relative;
top:10px;
}
.secondDiv {
background-color: lightgreen;
color: red;
}
.thirdDiv {
text-transform: capitalize;
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<p>Click the below button to add class to the below div element</p>
<button onclick="classAdd()">ADD CLASS</button>
<br>
<div id="DIV1">
sample div
</div>
<script>
function classAdd() {
document.getElementById("DIV1").classList.add("firstDiv", "secondDiv", "thirdDiv");
}
</script>
</body>
</html>Output
This will produce the following output −
On clicking ADD CLASS button −
In the above example −
We have created a div element and three css style classes which we will add to the div later −
.firstDiv {
width: 200px;
height: 200px;
padding: 15px;
border: 1px double blue;
position:relative;
top:10px;
}
.secondDiv {
background-color: lightgreen;
color: red;
}
.thirdDiv {
text-transform: capitalize;
text-align: center;
font-size: 30px;
}
<div id="DIV1">
sample div
</div>We have then created a button ADD CLASS that will execute the classAdd() method on click −
<button onclick="classAdd()">ADD CLASS</button>
The classAdd() method gets the element that has “DIV1” id associated with it which in our case is the <div> element. Then using the classlist property and its add() method we add the firstDiv, secondDiv and thirdDiv classes to the <div> element −
function classAdd() {
document.getElementById("DIV1").classList.add("firstDiv", "secondDiv", "thirdDiv");
}
250 Views
