Inline Styles in JavaScript
From the DOM Manipulation cheat sheet · Styling & Classes · verified Jul 2026
Inline Styles
Directly manipulate element styles through the style property
javascript
// Set individual styles
element.style.color = 'red'
element.style.backgroundColor = '#f0f0f0'
element.style.fontSize = '16px'
// Set multiple styles
Object.assign(element.style, {
color: 'blue',
fontSize: '20px',
margin: '10px'
})
// Remove style
element.style.color = ''
element.style.removeProperty('background-color')
// Get computed styles
const styles = window.getComputedStyle(element)
const color = styles.getPropertyValue('color')💡 Style properties use camelCase (backgroundColor)
⚠️ Inline styles have high specificity
📌 getComputedStyle returns resolved values
✅ Prefer CSS classes over inline styles
Continue with DOM Manipulation
Save the full cheat sheet or work through every related task.