Changing Classes

The classList API lets you add, remove, toggle, and check CSS classes on any DOM element. The goal is to let CSS handle all the visual changes — JavaScript just switches classes on and off.

The Four Methods

const el = document.querySelector(".box");

el.classList.add("active"); // adds the class
el.classList.remove("active"); // removes the class
el.classList.toggle("active"); // adds if missing, removes if present
el.classList.contains("active"); // true or false

Toggle: The Most Useful One

toggle is what you want for show/hide, open/close, selected/unselected patterns:

button.addEventListener("click", () => {
  menu.classList.toggle("open");
});

Then in CSS:

.menu {
  display: none;
}

.menu.open {
  display: block;
}

JavaScript controls the state. CSS controls the appearance. Clean separation.

Add Multiple Classes at Once

el.classList.add("visible", "animated", "fade-in");

Why Not className?

You can also do el.className = 'active', but this replaces all existing classes. classList methods are additive — they leave other classes intact.

// Dangerous — wipes all classes
el.className = "active";

// Safe — only changes 'active'
el.classList.add("active");

Use classList unless you specifically need to replace everything.