JAVASCRIPT
Dynamically Change Multiple Inline CSS Properties of an Element
Update an element's inline styles dynamically with JavaScript, setting properties like color, font size, and background directly via the `style` object.
const myElement = document.getElementById('myStyledElement');
if (myElement) {
myElement.style.color = '#FFFFFF';
myElement.style.backgroundColor = '#007BFF';
myElement.style.padding = '10px 15px';
myElement.style.fontSize = '18px';
myElement.style.borderRadius = '5px';
}
// HTML Structure (example):
// <div id="myStyledElement">Hello World</div>
// After execution, the div will have updated inline styles.
How it works: This code shows how to directly modify the inline CSS properties of a specific DOM element using its `style` object. By accessing `element.style.propertyName`, you can set various CSS properties programmatically. This method applies styles directly to the element's `style` attribute, giving it high specificity and allowing for dynamic visual updates without altering CSS classes.