Modifying DOM Element Styles and Classes

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

    // 1. Modifying inline styles
    element.style.backgroundColor = '#f0f0f0';
    element.style.padding = '10px';
    element.style.border = '1px solid #ccc';
    element.style.color = '#333';

    // 2. Manipulating CSS classes
    // Add a class
    element.classList.add('highlight');

    // Remove a class
    element.classList.remove('default-style');

    // Toggle a class (add if not present, remove if present)
    element.classList.toggle('active');

    // Check if a class exists
    if (element.classList.contains('highlight')) {
        console.log('Element has highlight class.');
    }
}

// Example Usage:
// Assume you have an element like: <div id="myDiv" class="default-style">Hello</div>
updateElementAppearance('myDiv');