References

Beginner-friendly references for web development, with live, editable examples.

The JavaScript style property

Property JavaScript All modern browsers Updated
Quick answer

The style property lets you set an element's inline CSS from JavaScript. el.style.color = "red" or el.style.backgroundColor = "#eee". CSS property names become camelCase (background-color → backgroundColor). For most styling, toggling a class is cleaner than setting many inline styles.

Overview

The style property gives you access to an element's inline styles. Assigning to it sets a CSS property directly on the element: box.style.color = "white", box.style.display = "none". It's the direct way to change one or two visual properties from script, often in response to user input or animation.

The naming quirk: CSS uses kebab-case, but JavaScript properties can't contain hyphens, so they become camelCase. background-color is style.backgroundColor, font-size is style.fontSize, z-index is style.zIndex. Values are strings and must include units where CSS requires them — style.width = "200px", not 200.

For anything beyond a property or two, prefer classList: define the look in CSS classes and toggle them, which keeps styling out of your JavaScript and is easier to maintain. Note also that reading el.style.color only returns inline styles you (or the markup) set — to read the actual rendered value from stylesheets, use getComputedStyle(el).

Syntax

element.style.color = "red";
element.style.backgroundColor = "#eee";  // camelCase
element.style.width = "200px";           // include units
element.style.display = "none";

getComputedStyle(element).color;          // the rendered value

Example

Live example 
<div id="box" style="font:15px system-ui;padding:14px">Watch me change</div>
<button onclick="highlight()" style="font:14px system-ui;margin-top:8px">Highlight</button>
<script>
  function highlight() {
    const box = document.getElementById('box');
    box.style.backgroundColor = '#1c7ce9';
    box.style.color = '#fff';
    box.style.borderRadius = '8px';
  }
</script>

Best practices

  • Use camelCase property names — backgroundColor, fontSize, zIndex.
  • Include units in values: style.width = "200px", not a bare number.
  • For more than a property or two, toggle a class instead — it keeps CSS in your stylesheet.
  • Read rendered values with getComputedStyle(el); el.style only reflects inline styles.

Frequently asked questions

How do I change a style with JavaScript?
Set the inline style property: el.style.color = "red". Use camelCase for multi-word properties.
Why is it backgroundColor and not background-color?
JavaScript property names can't contain hyphens, so CSS kebab-case becomes camelCase: background-color → backgroundColor.
Should I use style or classList?
For more than a property or two, classList is cleaner — define the styles in CSS and toggle classes. Use style for one-off or dynamic values.
Why can't I read a style set in my CSS file?
el.style only reads inline styles. Use getComputedStyle(el) to get the value actually applied by stylesheets.
showModal() textContent