How do you add and remove CSS classes with JavaScript?

Use the classList property and its add(), remove(), toggle(), and contains() methods to change classes without disturbing the others.

const element = document.querySelector(".card");

// Add class
element.classList.add("active");
// Multiple
element.classList.add("visible", "highlighted");

// Remove class
element.classList.remove("hidden");

// Toggle (add if missing, remove if present)
element.classList.toggle("expanded");

// Check if class exists
if (element.classList.contains("active")) {
    // ...
}

Why use classList over className:

// classList - surgical, preserves other classes
element.classList.add("new");

// className - replaces ALL classes
// Removes existing classes!
element.className = "new";

Tip: toggle() is perfect for show/hide functionality and dark mode switches.

Go deeper:

• Element.classList (MDN) — full reference for add/remove/toggle/contains/replace on the live token list.