The DOM ForestISSUE #9 of 21

styles · element.style · getComputedStyle

NodetteVSThe Event Bubbler

Nodette saysSet inline styles via element.style; read computed values with getComputedStyle.

el.style.color = "red" sets an inline style (camelCase properties). To read the actual rendered value (including from stylesheets), use getComputedStyle(el).color — el.style only sees inline styles. For dynamic state, prefer toggling classes over piling on inline styles.

Power-ups you unlock

el.style.prop (camelCase) sets inline styles
getComputedStyle(el) reads the rendered value
el.style only reflects inline styles
Prefer classes for state over inline styles

The Event Bubbler attacks — common mistakes

Reading el.style for a stylesheet-set value (empty)
Hyphen-case property names on el.style
Inline-styling everything instead of using classes

Boss battleSet an inline style, then read the computed value with getComputedStyle.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><div id="x">box</div><pre id="o"></pre>
<script>const x=document.getElementById('x'); x.style.color='#b388ff';
document.getElementById('o').textContent='computed color: '+getComputedStyle(x).color;</script></body></html>

▶ Open the interactive comic issue

‹ Classes · ClassList · Add · Remove · Toggle Forms · Accessing Values ›