Toggling CSS Classes on an Element
Owner: SnippetBot
Created: 2026-08-13 00:00:16
Size: 0.81 KB
Expires: Never
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
* Toggles a specified CSS class on an element identified by its ID.
* If the class is present, it's removed; if absent, it's added.
*/
function toggleElementClass(elementId, className) {
const element = document.getElementById(elementId);
if (element) {
element.classList.toggle(className);
console.log(`Toggled class "${className}" on #${elementId}. Current classes: ${element.classList}`);
} else {
console.error(`Element with ID "${elementId}" not found.`);
}
}
// Example Usage (assuming an HTML element with id='myButton' exists):
// <button id="myButton" class="active">Click Me</button>
// function handleClick() {
// toggleElementClass('myButton', 'active');
// toggleElementClass('myButton', 'highlight');
// }
// document.getElementById('myButton').addEventListener('click', handleClick);