Add, Remove and Toggle Class with JavaScript classList

Contents
In this article, you will learn how to add, remove and toggle CSS classes on an element with JavaScript classList
property.
What is classList?
In JavaScript, by using the classList
property to an HTML element, the class name(s) specified for that element can be obtained as a DOMTokenList object.
The classList
property has the following methods:
Method | Description |
---|---|
add(class1, class2, …) | Adds one or more class names to an element. |
remove(class1, class2, …) | Removes one or more class names from an element. |
toggle(class, true|false) | Toggles between a class name for an element. |
contains(class) | Returns a Boolean value, indicating whether an element has the specified class name. |
classList.add()
To add the specified class name, use the classList
method add()
.
This is an example of the classList
method add()
.
Demo
Clicking the button will add a class to the p
element and display the text.
Code
HTML
<p id="txt">Class added!</p>
<button id="btn-add">Add</button>
CSS
.add-class {
display: block;
}
JavaScript
let txt = document.getElementById('txt');
let addButton = document.getElementById('btn-add');
addButton.addEventListener('click', () => {
txt.classList.add('add-class');
});
classList.remove()
To remove the specified class name, use the classList
method remove()
.
This is an example of the classList
method remove()
.
Demo
Clicking the button removes the class from the p
element and hides the text.
Code
HTML
<p id="txt" class="remove-class">Remove Class</p>
<button id="btn-remove">Remove</button>
CSS
.remove-class {
display: block;
}
JavaScript
let txt = document.getElementById('txt');
let removeButton = document.getElementById('btn-remove');
removeButton.addEventListener('click', () => {
txt.classList.remove('remove-class');
});
classList.toggle()
To toggle the specified class name, use the classList
method toggle()
.
If the element has the specified class name, the class name will be removed, otherwise it will be added.
This is an example of the classList
method toggle()
.
Demo
Clicking the button to toggle the class of the p
element and the text display.
Code
HTML
<p id="txt" class="toggle-class">Toggle Class</p>
<button id="btn-toggle">Toggle</button>
CSS
.toggle-class {
display: none;
}
JavaScript
let txt = document.getElementById('txt');
let toggleButton = document.getElementById('btn-toggle');
toggleButton.addEventListener('click', () => {
txt.classList.toggle('toggle-class');
});
classList.contains()
To determine if the element has the specified class name, use the classList
method contains()
.
This is an example of the classList
method contains()
.
Demo
Code
HTML
<p id="txt" class="contains-class">Contains Class</p>
<button id="btn-contains">Contains</button>
CSS
.contains-class {
display: none;
}
JavaScript
let txt = document.getElementById('txt');
let containsButton = document.getElementById('btn-contains');
containsButton.addEventListener('click', () => {
if(txt.classList.contains('contains-class')) {
txt.classList.remove('contains-class');
} else {
txt.classList.add('contains-class');
}
});