Add, Remove and Toggle Class with JavaScript classList

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