JavaScriptDomBeginner

element.classList (add/remove/toggle/contains)

Adds/removes/toggles CSS classes on an element safely.

Review the syntaxStudy the examplesOpen the coding app
el.classList.add('a'); el.classList.remove('a'); el.classList.toggle('a');
Open Coding Reference

This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.

What it does

Overview

Adds/removes/toggles CSS classes on an element safely.

The element.classList property returns a live DOMTokenList collection representing the class attributes of an element. This interface is superior to element.className because it provides built-in methods—add(), remove(), toggle(), replace(), and contains()—which handle whitespace and duplicate removal automatically without manual string parsing or regular expressions. Methods like add() and remove() can accept multiple arguments to modify several classes in a single operation. The toggle() method is especially useful for UI state logic because it accepts an optional second boolean parameter (force) that determines whether the class should be strictly added or removed regardless of its current state. While classList is supported in IE10+, features like multiple arguments and the replace() method are not supported in Internet Explorer.

Quick reference

Syntax

el.classList.add('a'); el.classList.remove('a'); el.classList.toggle('a');

See it in practice

Examples

1

Basic Class Manipulation

const btn = document.querySelector('.menu-btn');
btn.classList.add('active');
if (btn.classList.contains('active')) {
  btn.classList.remove('hidden');
}
console.log(btn.className);
Output:
"menu-btn active"

Demonstrates adding, checking, and removing classes to update an element's visual state.

2

Using Toggle with Force Parameter

const sidebar = document.querySelector('#sidebar');
const isVisible = false;
// If isVisible is true, add 'open'; if false, remove 'open'
sidebar.classList.toggle('open', isVisible);
console.log(sidebar.classList.contains('open'));
Output:
false

Uses the optional second argument in toggle() to force a specific state based on a boolean condition.

3

Modifying Multiple Classes

const box = document.createElement('div');
box.classList.add('shadow', 'rounded', 'p-4');
box.classList.remove('p-4', 'shadow');
console.log(box.classList.value);
Output:
"rounded"

Shows how to pass multiple strings as individual arguments to add or remove several classes at once (IE not supported for multiple arguments).

Debug faster

Common Errors

1

TypeError

Cause: Attempting to add a string containing spaces (e.g., 'class1 class2') as a single argument.

Fix: Pass multiple classes as separate comma-separated string arguments.

el.classList.add('foo bar'); // Throws DOMException: The token provided contains HTML space characters.
2

LogicError

Cause: Attempting to assign a value directly to classList as if it were a string.

Fix: Use the add() method or use element.className if you intend to overwrite the entire string.

el.classList = 'new-class'; // Fails silently or doesn't work as expected; classList is read-only.

Runtime support

Compatibility

BrowserAll modern browsers, IE10+Modern DOM

Source: MDN Web Docs

Common questions

Frequently Asked Questions

Adds/removes/toggles CSS classes on an element safely.

TypeError: Pass multiple classes as separate comma-separated string arguments. LogicError: Use the add() method or use element.className if you intend to overwrite the entire string.