JAVASCRIPT
Efficiently Manage CSS Classes on Multiple Elements
Discover how to efficiently add, remove, or toggle CSS classes on a collection of DOM elements using query selectors and the classList API in JavaScript.
function manageClasses(selector, action, className) {
const elements = document.querySelectorAll(selector);
elements.forEach(element => {
switch (action) {
case 'add':
element.classList.add(className);
break;
case 'remove':
element.classList.remove(className);
break;
case 'toggle':
element.classList.toggle(className);
break;
default:
console.warn(`Invalid action '${action}'. Use 'add', 'remove', or 'toggle'.`);
}
});
}
// Usage examples:
// Assuming HTML: <div class="item"></div><div class="item"></div>
manageClasses('.item', 'add', 'highlight'); // Adds 'highlight' class to all '.item' elements
manageClasses('.item', 'remove', 'active'); // Removes 'active' class from all '.item' elements
manageClasses('p.status', 'toggle', 'hidden'); // Toggles 'hidden' class on all 'p' elements with class 'status'
How it works: This utility function simplifies the management of CSS classes across multiple DOM elements. It uses `document.querySelectorAll` to select elements based on a CSS selector and then iterates over them using `forEach`. The `classList` API (`add`, `remove`, `toggle`) is then used to perform the specified class manipulation, making it highly efficient for styling dynamic content or interactive components.