How to Change an Element's Class with JavaScript

By the end of this page, you will understand how JavaScript changes CSS classes on HTML elements, how to respond to events like clicks, and when to use className versus classList methods such as add(), remove(), toggle(), and replace().

JavaScript can modify the class attribute of an HTML element at runtime. This is one of the most common ways to update a page's appearance or behavior without reloading it.

CSS classes usually control styling:

.active {
  background: blue;
  color: white;
}

When JavaScript adds or removes a class, the browser immediately re-applies the CSS rules for that element.

For example, if a button gets the active class after a click, it might change color, become visible, animate, or indicate selection.

There are two main ways to change classes:

1. element.className

   • Replaces the entire class string.
   • Simple, but easy to overwrite existing classes by mistake.

2. element.classList

   • A modern and safer API for working with individual classes.
   • Lets you add, remove, toggle, check, and replace classes.

Why this matters in real programming:

• Show or hide menus
• Mark selected items
• Highlight form errors
• Switch themes like dark mode
• Trigger animations
• Update UI state after API responses

In practice, classList is usually the best choice because it works with one class at a time and avoids accidental overwrites.

Think of an HTML element's classes like sticky labels on a box.

• className means replacing the whole set of labels at once.
• classList.add("active") means placing one new label on the box.
• classList.remove("active") means peeling one label off.
• classList.toggle("active") means adding the label if it is missing, or removing it if it is already there.

Events such as clicks are like signals telling JavaScript when to update those labels.

Core syntax

Using classList

element.classList.add("active");
element.classList.remove("active");
element.classList.toggle("active");
element.classList.replace("old-class", "new-class");

Using className

element.className = "active";

This replaces all existing classes with active.

Example: change class on click

<button id="myButton" class="btn">Click me</button>

.btn {
  : gray;
  : white;
}

 {
  : green;
}

Consider this example:

<div id="card" class="card">Hello</div>

const card = document.getElementById("card");

card.addEventListener("click", function () {
  card.classList.toggle("highlight");
});

Step by step:

1. The browser loads the HTML.
2. JavaScript runs document.getElementById("card").
3. The variable card now refers to the <div> element.
4. addEventListener("click", ...) tells the browser to wait for a click on that element.
5. When the user clicks the <div>, the callback function runs.
6. card.classList.toggle("highlight") checks whether highlight is already present.

Changing classes with JavaScript is used everywhere in web development.

Common examples

• Navigation menus: add an open class when a mobile menu button is clicked
• Form validation: add an error class to invalid inputs
• Tabs and accordions: add an active class to the selected tab
• Dark mode: toggle a dark class on the body
• Loading states: add a loading class while waiting for an API response
• Animations: add a class like fade-in to start a CSS animation
• Selected items: mark a chosen product, card, or list row

Example: showing and hiding a menu

const menuButton = document.getElementById("menuButton");
const menu = document.getElementById("menu");

menuButton.addEventListener("click", function () {
  menu.classList.();
});

In real projects, developers usually use class changes to represent UI state.

Common patterns

Guard clauses

Check that an element exists before changing its class:

const modal = document.getElementById("modal");

if (!modal) {
  return;
}

modal.classList.add("visible");

This prevents errors if the element is missing.

Event-driven UI updates

document.getElementById("saveButton").addEventListener("click", function () {
  document.body.classList.add("saving");
});

Validation states

function showError(input) {
  input.classList.add("error");
}

 () {
  input..();
}

1. Overwriting all classes accidentally

Broken example:

element.className = "active";

If the element originally had:

<div class="card large"></div>

it now loses card and large.

Better:

element.classList.add("active");

2. Using . in the class name

Broken example:

element.classList.add(".active");

Class names in JavaScript should not include the dot.

Correct:

element.classList.add("active");

// Select an element
const element = document.getElementById("myElement");

// Add a class
element.classList.add("active");

// Remove a class
element.classList.remove("active");

// Toggle a class
element.classList.toggle("active");

// Replace a class
element.classList.replace("hidden", "visible");

// Check if a class exists
element.classList.contains("active");

// Replace all classes
element.className = "active";

Rules to remember

• Use classList for most class changes
• Do not include . in class names
• className replaces the entire class string
• toggle() adds if missing, removes if present
• returns multiple elements, so loop over them

How do I change a class when a button is clicked in JavaScript?

Use an event listener and classList:

button.addEventListener("click", function () {
  element.classList.add("active");
});

What is the difference between className and classList?

className replaces the whole class string. classList lets you safely add, remove, or toggle individual classes.

How do I toggle a class on click?

Use:

element.classList.toggle("active");

This adds the class if it is missing and removes it if it is already there.

Can I change a class using onclick in HTML?

Yes:

<button onclick="this.classList.toggle('active')">Click

• DOM manipulation — Changing classes is a basic part of updating HTML elements with JavaScript.
• Event handling — Class changes often happen in response to clicks, input, hover, or keyboard events.
• CSS selectors — Classes matter because CSS uses them to style elements.
• querySelector and getElementById — You need to select elements before changing their classes.
• addEventListener — This is the standard way to react to browser events.
• Show/hide elements with JavaScript — A common use of classes like hidden or open.
• Form validation — Invalid fields often get error classes dynamically.
• JavaScript functions — Event handlers are often written as functions that update classes.