References

Beginner-friendly references for web development, with live, editable examples.

The JavaScript classList property

Property JavaScript All modern browsers Updated
Quick answer

The classList property gives you methods to manage an element's CSS classes: add(), remove(), toggle() and contains(). el.classList.toggle("active") flips a class on and off. It's the clean, modern way to drive styling from JavaScript — far better than string-juggling the className.

Overview

classList is a property that exposes an element's classes as a tidy little API. Instead of manipulating the className string by hand, you call methods: classList.add("open"), classList.remove("open"), classList.contains("open"), and the star of the show, classList.toggle("open"), which adds the class if it's missing and removes it if it's there.

This is the heart of the standard pattern for dynamic UI: define how things look in CSS with classes, then add and remove those classes from JavaScript in response to events. Showing a menu, highlighting a selected tab, switching to dark mode — all of it is usually just toggling a class. toggle() even takes an optional boolean to force the class on or off based on a condition.

Why not just set className? Because assigning className overwrites all the element's classes, so you have to carefully preserve the others — error-prone and verbose. classList touches only the class you name and leaves the rest alone. It pairs perfectly with addEventListener() to build interactivity.

Syntax

element.classList.add("active")
element.classList.remove("active")
element.classList.toggle("active")        // add if absent, remove if present
element.classList.toggle("active", isOn)  // force on/off
element.classList.contains("active")      // true / false

Example

Live example 
<style>.box{font:15px system-ui;padding:14px;border-radius:8px}.on{background:#1c7ce9;color:#fff}</style>
<div id="box" class="box">Click the button to toggle me</div>
<button onclick="document.getElementById('box').classList.toggle('on')" style="font:14px system-ui;margin-top:8px">Toggle class</button>

Best practices

  • Use toggle() for show/hide and on/off UI — it's a one-liner.
  • Prefer classList over assigning className, which clobbers all existing classes.
  • Drive appearance from CSS classes and flip them in JS, rather than setting inline styles.
  • Pass a boolean to toggle(class, condition) to set state from a value.

Frequently asked questions

How do I add or remove a class in JavaScript?
Use element.classList.add("name") and element.classList.remove("name").
How do I toggle a class?
Use element.classList.toggle("name"), which adds the class if it's absent and removes it if present.
What is the difference between classList and className?
classList changes individual classes without affecting the others; setting className replaces the entire class string at once.
How do I check if an element has a class?
Use element.classList.contains("name"), which returns true or false.
appendChild() clipboard.writeText()