JAVASCRIPT
Efficiently Toggling and Managing CSS Classes with classList
Discover how to add, remove, toggle, and check for CSS classes on DOM elements using the modern classList API, streamlining UI interactions.
// HTML Example: <button id="myButton" class="btn primary">Click Me</button>
const myButton = document.getElementById('myButton');
// Add a class
myButton.classList.add('active');
console.log('After add:', myButton.className); // Output: btn primary active
// Remove a class
myButton.classList.remove('primary');
console.log('After remove:', myButton.className); // Output: btn active
// Toggle a class (adds if not present, removes if present)
myButton.classList.toggle('active'); // Removes 'active'
console.log('After first toggle:', myButton.className); // Output: btn
myButton.classList.toggle('highlight'); // Adds 'highlight'
console.log('After second toggle:', myButton.className); // Output: btn highlight
// Check if a class exists
const hasBtnClass = myButton.classList.contains('btn');
console.log('Has "btn" class:', hasBtnClass); // Output: Has "btn" class: true
const hasActiveClass = myButton.classList.contains('active');
console.log('Has "active" class:', hasActiveClass); // Output: Has "active" class: false
// Add multiple classes
myButton.classList.add('large', 'outline');
console.log('After adding multiple:', myButton.className); // Output: btn highlight large outline
// Replace a class
myButton.classList.replace('outline', 'solid');
console.log('After replace:', myButton.className); // Output: btn highlight large solid
How it works: The `Element.classList` property provides a convenient way to manipulate an element's list of CSS classes. Unlike directly modifying `className` (which overwrites all classes), `classList` offers methods like `add()`, `remove()`, `toggle()`, `contains()`, and `replace()` to manage individual classes or multiple classes efficiently. This API is essential for dynamically changing an element's styling or behavior in response to user interactions or application state.