How can I change an element’s class with JavaScript?

To change an element’s class(es) in JavaScript, you can use the classList property (modern approach) or the className property (legacy approach). Here’s how to do both:

1. Using classList (Modern & Recommended)

The classList API provides methods to manipulate classes cleanly and efficiently.

Add a Class

element.classList.add('new-class');

Remove a Class

element.classList.remove('old-class');

Toggle a Class

element.classList.toggle('active'); // Adds if missing, removes if present

Replace a Class

element.classList.replace('old-class', 'new-class');

Check if a Class Exists

if (element.classList.contains('check-me')) {
  // Class exists
}

Add/Remove Multiple Classes

element.classList.add('class1', 'class2', 'class3');
element.classList.remove('classA', 'classB');

2. Using className (Legacy Approach)

Directly set the entire class string (overwrites existing classes).

// Replace all classes
element.className = 'new-class';

// Append a class (without removing others)
element.className += ' additional-class';

Full Example

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

const button = document.getElementById('myButton');

// Add a "primary" class
button.classList.add('btn-primary');

// Remove the "btn" class
button.classList.remove('btn');

// Toggle "active" on click
button.addEventListener('click', () => {
  button.classList.toggle('active');
});

Key Notes

• classList is supported in all modern browsers (IE10+).
• className works in all browsers but is less flexible.
• Use classList for precise control (prevents accidental class overwrites).

Browser Compatibility

Method	Browser Support
classList	IE10+, modern browsers
className	All browsers

Use classList for modern applications and className only for simple cases or legacy support.