JAVASCRIPT
Directly Modifying Inline CSS Styles
Understand how to programmatically change an element's inline CSS properties using JavaScript, offering precise and immediate control over its visual presentation and layout.
const myBox = document.getElementById('coloredBox');
myBox.style.backgroundColor = '#FFDDC1'; // Sets background color
myBox.style.border = '2px solid #FFA07A'; // Sets border
myBox.style.padding = '15px'; // Sets padding
myBox.style.marginTop = '20px'; // Sets margin-top
// To remove an inline style, set its property to an empty string
// myBox.style.backgroundColor = '';
How it works: This snippet demonstrates how to directly manipulate an element's inline CSS styles using its `style` property. CSS properties are accessed using camelCase (e.g., `backgroundColor` for `background-color`). This method provides immediate visual feedback and is useful for fine-grained, dynamic styling adjustments or animations that don't rely on predefined CSS classes.