Dynamically Apply Inline CSS Styles to an Element

// Assume an HTML element: <div id="styledBox" style="width: 100px; height: 100px; background-color: lightgray;"></div>
const styledBox = document.getElementById('styledBox');

if (styledBox) {
    console.log('Initial styles:', styledBox.style.cssText);

    // 1. Set individual style properties
    styledBox.style.backgroundColor = 'purple'; // camelCase for CSS properties
    styledBox.style.color = 'white';
    styledBox.style.padding = '15px';

    // 2. Set multiple styles at once using cssText (overwrites existing inline styles)
    // Be cautious: this overwrites *all* existing inline styles.
    // styledBox.style.cssText = 'background-color: navy; color: yellow; border: 2px solid orange;';

    // More controlled way to add multiple without overwriting (but might be less efficient for many properties)
    Object.assign(styledBox.style, {
        border: '2px solid red',
        borderRadius: '8px',
        fontSize: '1.2em'
    });

    console.log('Updated styles (individual):', styledBox.style.cssText);

    // 3. Get a specific inline style property
    const currentBgColor = styledBox.style.backgroundColor;
    console.log('Current background color:', currentBgColor); // Output: purple

    // 4. Remove an inline style property
    styledBox.style.padding = ''; // Setting to an empty string removes the inline style
    console.log('Styles after padding removal:', styledBox.style.cssText);
} else {
    console.error("Element with id 'styledBox' not found.");
}