JavaScript DOM
The
styleproperty 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.
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.
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.
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.
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.
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.
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>Run the above example in the Try It Editor.
Try removing a unit:
Change "20px" to 20 and see the size stop changing.
element.style sets inline styles.style cannot read values from a stylesheet.getComputedStyle reads the value actually applied.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.