DOM

How to Manipulate CSS Classes

Use classList methods to add, remove, or toggle classes

Quick Answer (2024 ES6+ Way)

javascript

const element = document.querySelector('.box');
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('visible');

Live Example

javascript

const button = document.querySelector('button');
const panel = document.querySelector('.panel');

button.addEventListener('click', () => {
  // Toggle multiple classes
  panel.classList.toggle('open');
  panel.classList.toggle('animated');
  
  // Check if has class
  if (panel.classList.contains('open')) {
    button.textContent = 'Close';
  } else {
    button.textContent = 'Open';
  }
});

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

Common Variations

Add Multiple Classes

javascript

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

Conditional Classes

javascript

element.classList.toggle('active', isActive);
// Adds if isActive is true, removes if false

❌ Don't Do This (Outdated Way)

Avoid className string manipulation

javascript

// DON'T DO THIS
element.className += ' new-class';

Browser Support

✓ Works in all modern browsers (IE10+)

#dom#classlist#css