Manage Element Classes with classList API

function manageClasses(elementId) {
    const element = document.getElementById(elementId);
    if (!element) {
        console.error(`Element with ID '${elementId}' not found.`);
        return;
    }

    // Add a class
    element.classList.add('active');
    console.log(`Class 'active' added. Current classes: ${element.className}`);

    // Remove a class
    element.classList.remove('inactive'); // If it existed
    console.log(`Class 'inactive' removed. Current classes: ${element.className}`);

    // Toggle a class
    element.classList.toggle('highlight'); // Adds if not present, removes if present
    console.log(`Class 'highlight' toggled. Current classes: ${element.className}`);

    // Check if a class exists
    const hasActive = element.classList.contains('active');
    console.log(`Element has 'active' class: ${hasActive}`);

    // You can also add multiple classes at once
    element.classList.add('fade-in', 'visible');
}

// Example usage:
// Assume you have an HTML element like: <div id="myElement" class="inactive">Hello</div>
// manageClasses('myElement');