Add, Remove and Toggle Class with JavaScript classList

Web Design & Web Development

In this article, I will introduce 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.

MethodDescription
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.
Sponsored links

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");
});
Sponsored links

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");
});
Sponsored links

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");
});
Sponsored links

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");
  }
});