JAVASCRIPT
Add, Remove, or Toggle CSS Classes on an Element
Master dynamic styling by using JavaScript's `element.classList` API to add, remove, or toggle CSS classes, allowing for flexible and responsive UI changes.
/**
* Manages CSS classes on an HTML element using the classList API.
* @param {HTMLElement} element - The HTML element to modify.
* @param {string} className - The CSS class name to add, remove, or toggle.
* @param {'add'|'remove'|'toggle'} action - The action to perform ('add', 'remove', 'toggle').
*/
function manageClass(element, className, action) {
if (!element || !className || !action) {
console.error('Invalid arguments provided to manageClass.');
return;
}
switch (action) {
case 'add':
element.classList.add(className);
console.log(`Class '${className}' added to element. Current classes:`, element.className);
break;
case 'remove':
element.classList.remove(className);
console.log(`Class '${className}' removed from element. Current classes:`, element.className);
break;
case 'toggle':
const toggled = element.classList.toggle(className);
console.log(`Class '${className}' was ${toggled ? 'added' : 'removed'} from element. Current classes:`, element.className);
break;
default:
console.warn(`Unknown action: ${action}. Use 'add', 'remove', or 'toggle'.`);
}
}
// Example usage:
// const myButton = document.getElementById('myButton'); // Assume this element exists
// manageClass(myButton, 'active', 'add'); // Add 'active' class
// manageClass(myButton, 'highlight', 'add'); // Add 'highlight' class
// manageClass(myButton, 'active', 'remove'); // Remove 'active' class
// manageClass(myButton, 'highlight', 'toggle'); // Toggle 'highlight' class (removes it if present)
// manageClass(myButton, 'new-state', 'toggle'); // Toggle 'new-state' class (adds it if not present)
How it works: This snippet demonstrates the use of the `classList` API, which is the preferred way to manipulate CSS classes on an HTML element. It provides methods like `add()`, `remove()`, and `toggle()` to easily manage an element's classes. This is crucial for applying or changing styles dynamically, such as highlighting selected items, showing different states for UI components, or implementing dark/light themes.