JAVASCRIPT
Toggle CSS Classes for Dynamic Styling
Master how to add, remove, and toggle CSS classes on DOM elements using `classList` in JavaScript to create interactive and dynamic visual effects and states.
document.addEventListener('DOMContentLoaded', () => {
const myElement = document.getElementById('toggle-target');
const toggleButton = document.getElementById('toggle-button');
if (myElement && toggleButton) {
toggleButton.addEventListener('click', () => {
myElement.classList.toggle('active');
if (myElement.classList.contains('active')) {
console.log('Element is now active.');
} else {
console.log('Element is no longer active.');
}
});
// Example of adding/removing classes manually
const addClassButton = document.createElement('button');
addClassButton.textContent = 'Add Highlight';
addClassButton.onclick = () => myElement.classList.add('highlight');
const removeClassButton = document.createElement('button');
removeClassButton.textContent = 'Remove Highlight';
removeClassButton.onclick = () => myElement.classList.remove('highlight');
// Insert buttons for demonstration purposes
toggleButton.parentNode.insertBefore(addClassButton, toggleButton.nextSibling);
toggleButton.parentNode.insertBefore(removeClassButton, addClassButton.nextSibling);
}
});
/* Example CSS to accompany this snippet: */
/*
.active {
background-color: lightblue;
border: 2px solid blue;
padding: 10px;
}
.highlight {
box-shadow: 0 0 10px yellow;
}
*/
How it works: This snippet demonstrates using the `classList` API to manipulate CSS classes on an HTML element. `classList.toggle()` efficiently adds or removes a class based on its current presence, ideal for switching states like active/inactive or showing/hiding elements. It also showcases `classList.add()` and `classList.remove()` for explicit control over element styling, providing robust dynamic styling capabilities.