JAVASCRIPT
Toggle CSS Classes on DOM Elements
Master toggling CSS classes on any HTML element using `classList.toggle`, `add`, and `remove`. Essential for interactive UI states like active menus or dark modes.
function toggleActiveClass(elementId, className = 'active') {
const element = document.getElementById(elementId);
if (element) {
element.classList.toggle(className);
console.log(`Toggled class '${className}' on element '${elementId}'. Current state: ${element.classList.contains(className) ? 'active' : 'inactive'}`);
} else {
console.error(`Element with ID '${elementId}' not found.`);
}
}
function addClass(elementId, className) {
const element = document.getElementById(elementId);
if (element) {
element.classList.add(className);
}
}
function removeClass(elementId, className) {
const element = document.getElementById(elementId);
if (element) {
element.classList.remove(className);
}
}
// Example Usage:
// Assuming an existing <button id="myButton">Click Me</button>
// And CSS: .highlight { background-color: yellow; }
// document.getElementById('myButton').addEventListener('click', () => {
// toggleActiveClass('myButton', 'highlight');
// });
// addClass('myButton', 'large-font');
How it works: This collection of functions demonstrates how to dynamically manage CSS classes on a DOM element. `toggleActiveClass` conveniently adds or removes a class based on its current presence, while `addClass` and `removeClass` provide explicit control to add or remove specific classes, enabling interactive styling changes.