Dynamically Change Inline CSS Styles of an Element

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

    for (const prop in styles) {
        // Convert camelCase JS property to kebab-case if necessary for some specific cases
        // (though element.style usually handles camelCase automatically for CSS properties)
        element.style[prop] = styles[prop];
    }
    console.log(`Inline styles applied to element '${elementId}'.`);
}

function removeInlineStyle(elementId, property) {
    const element = document.getElementById(elementId);
    if (element) {
        element.style[property] = ''; // Setting to empty string removes the inline style
        console.log(`Inline style property '${property}' removed from element '${elementId}'.`);
    } else {
        console.warn(`Element with ID '${elementId}' not found.`);
    }
}

// Example usage:
// Assume <div id="myStyledDiv" style="color: blue;">Hello</div>
// applyInlineStyles('myStyledDiv', {
//     backgroundColor: 'yellow',
//     fontSize: '20px',
//     border: '1px solid black'
// });
// setTimeout(() => removeInlineStyle('myStyledDiv', 'backgroundColor'), 2000);