HTML Element .classList

// Adds a class.
element.classList.add("className");

// Removes a class.
element.classList.remove("className");

// Removes the class if it exists, or adds it if it does not.
element.classList.toggle("className");

// Checks whether a class exists.
var result = element.classList.contains("className");

sample_classList.html

<div id="card" class="card">Kiryu Kazuma — Dojima Family</div>
<button id="btn-highlight">Toggle Highlight</button>
<button id="btn-reset">Reset</button>

sample_classList.js

var card = document.getElementById("card");

// Pattern 1: Add a class
card.classList.add("active");
console.log(card.className); // Outputs "card active"

// Pattern 2: Add multiple classes at once
card.classList.add("rounded", "shadow");
console.log(card.className); // Outputs "card active rounded shadow"

// Pattern 3: Check whether a class exists
console.log(card.classList.contains("active")); // Outputs "true"
console.log(card.classList.contains("hidden")); // Outputs "false"

// Pattern 4: Remove a class (no error if the class does not exist)
card.classList.remove("shadow");
console.log(card.classList.contains("shadow")); // Outputs "false"

// Pattern 5: Toggle a class on button click (removes if present, adds if absent)
var btnHighlight = document.getElementById("btn-highlight");
btnHighlight.addEventListener("click", function() {
	card.classList.toggle("highlight");
});

// Pattern 6: Switch classes based on a condition
var isActive = card.classList.contains("active");
if (isActive) {
	card.classList.remove("active");
	card.classList.add("inactive");
}

View sample page

element.classList is a property for safely and easily manipulating the class attribute of an HTML element. Previously, you had to directly manipulate a string using the element.className property, but the methods on element.classList make it straightforward to add and remove individual classes.

The toggle() method in particular is handy for switching UI states. Operations such as opening and closing menus, switching active tabs, or toggling dark mode — any "on/off" state switch — can be written in a single line.

Because add() and remove() do not throw an error when you add or remove a class that does not exist, there is no need to check for the class beforehand.