Adding, removing, and testing for classes

The answer

<nav id="menu" class="menu">Menu</nav>
<button id="open">Open</button>

const menu = document.querySelector("#menu");

menu.classList.add("is-open");            // jQuery: $(menu).addClass("is-open")
menu.classList.remove("is-open");         // $(menu).removeClass("is-open")
menu.classList.toggle("is-open");         // $(menu).toggleClass("is-open")
menu.classList.contains("is-open");       // $(menu).hasClass("is-open") -> true

menu.classList.add("wide", "dark");       // several at once
menu.classList.replace("dark", "light");  // swap one class for another

classList is a live list of the element’s classes, read from the class attribute and written back to it as you change it¹. Reading el.className still gives you the whole attribute as one string, which is useful for debugging and for nothing else.

In jQuery

$("#menu").addClass("is-open wide");
$("#menu").removeClass("is-open");
$("#menu").toggleClass("is-open");
$("#menu").hasClass("is-open");

jQuery’s .addClass() adds the class or classes to every element in the matched set and takes a space-separated string, or an array since jQuery 3.3².

Browser support classList is Baseline widely available: MDN records it as available across browsers since October 2017¹. Nothing on this page needs a fallback for a browser released in the last eight years.

Differs from jQuery classList belongs to one element. jQuery methods act on every element in the set at once; in plain JavaScript you loop (next section). Several classes are several arguments, add("a", "b"), not one space-separated string: add("a b") throws, because a class name cannot contain a space¹. toggle() takes a second argument that forces the class on or off¹; jQuery’s .toggleClass() has the same second argument.

Several elements at once

querySelectorAll() returns a static list; forEach walks it.

document.querySelectorAll(".card").forEach((card) => {
  card.classList.add("is-visible");
});

// toggle depending on a condition, the way jQuery's second argument does
document.querySelectorAll(".card").forEach((card, i) => {
  card.classList.toggle("is-featured", i < 3);
});

Toggling from an event

The example above has a button. Wire it up. toggle() returns true when the class is in the list after the call and false when it is not, so the handler knows the new state without a second lookup³.

document.querySelector("#open").addEventListener("click", () => {
  const isOpen = document.querySelector("#menu").classList.toggle("is-open");
  console.log(isOpen ? "opened" : "closed");
});

function hasClass(el, className) {
  return el.classList ? el.classList.contains(className) : new RegExp("\\b" + className + "\\b").test(el.className);
}
function addClass(el, className) {
  if (el.classList) el.classList.add(className);
  else if (!hasClass(el, className)) el.className += " " + className;
}
function removeClass(el, className) {
  if (el.classList) el.classList.remove(className);
  else el.className = el.className.replace(new RegExp("\\b" + className + "\\b", "g"), "");
}
addClass(document.querySelector("#menu"), "legacy-tested");

Sources