JavaScript DOM

JavaScript DOM Styles

Written by Swapnil RajaPublished 24 Aug 2026

The style property changes an element's appearance directly from JavaScript.

Property names become camel case, so background-color is backgroundColor.

Every value is a string, including sizes, which need their unit.

Example

javascript

document.body.innerHTML = '<p id="demo">Styled</p>';

const p = document.getElementById("demo");
p.style.color = "red";

console.log(p.style.color);

The output is red.

The style Property

element.style reads and writes inline styles.

Dashed CSS names become camel case in JavaScript.

It only sees inline styles, not rules from a stylesheet.

Syntax

javascript

element.style.color = "red";
element.style.backgroundColor = "yellow";

The value is always a string.

Camel Case Names

A dash is not valid in a property name, so the next letter is capitalised.

Example

javascript

document.body.innerHTML = '<p id="demo">Text</p>';

const p = document.getElementById("demo");
p.style.backgroundColor = "yellow";
p.style.fontSize = "20px";

console.log(p.style.fontSize);

font-size becomes fontSize.

Units Are Required

A number on its own is ignored for properties that need a unit.

Example

javascript

document.body.innerHTML = '<div id="box">Box</div>';

const box = document.getElementById("box");
box.style.width = "200px";

console.log(box.style.width);

Writing 200 instead of "200px" would do nothing.

style Only Sees Inline Styles

A value set in a stylesheet does not appear here.

This catches people out when they try to read a style they never set inline.

Example

javascript

document.body.innerHTML =
  '<style>#demo { color: blue; }</style><p id="demo">Text</p>';

const p = document.getElementById("demo");

console.log(p.style.color === "" ? "nothing inline" : p.style.color);

The stylesheet rule is real, but style cannot see it.

getComputedStyle

This reads the value the browser actually applied, from wherever it came.

Example

javascript

document.body.innerHTML =
  '<style>#demo { color: rgb(0, 0, 255); }</style><p id="demo">Text</p>';

const p = document.getElementById("demo");

console.log(getComputedStyle(p).color);

Computed values come back in the browser's own format, usually rgb.

Prefer Classes for Real Work

Setting many styles one at a time is hard to maintain.

Adding a class keeps the appearance in the stylesheet where it belongs.

Example

javascript

document.body.innerHTML =
  '<style>.active { color: green; }</style><p id="demo">Text</p>';

document.getElementById("demo").classList.add("active");

console.log(document.getElementById("demo").className);

Classes are covered properly in the next lesson.

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript DOM Styles</title>
</head>
<body>

  <h1>DOM Styles</h1>

  <p id="demo">This text will be styled.</p>

  <script>
    const p = document.getElementById("demo");

    p.style.color = "teal";
    p.style.fontSize = "20px";
    p.style.padding = "12px";
    p.style.backgroundColor = "#f0fdfa";
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try removing a unit:

Change "20px" to 20 and see the size stop changing.

Important Points

element.style sets inline styles.
Dashed CSS names become camel case.
Sizes need their unit as part of the string.
style cannot read values from a stylesheet.
getComputedStyle reads the value actually applied.

Conclusion

The style property is the direct way to change appearance from JavaScript.

It is ideal for one or two values that genuinely have to be dynamic.

For anything larger, adding a class is easier to maintain.

PreviousJavaScript DOM Attributes NextJavaScript classList