The Old NetISSUE #40 of 60

computed styles · getComputedStyle

Pixel PeteVSQuirks Mode

Pixel Pete saysgetComputedStyle reads the actual rendered value, including styles from stylesheets.

el.style only sees inline styles; to read the effective value (from CSS files, the cascade, defaults) use getComputedStyle(el).color. It returns resolved values (often in px/rgb). It's read-only and triggers layout, so don't call it in tight loops — cache the value you need.

Power-ups you unlock

getComputedStyle reads the rendered value
Sees stylesheet + cascade, not just inline
Returns resolved values (px, rgb)
Read-only; avoid in tight loops

Quirks Mode attacks — common mistakes

Reading el.style for a stylesheet-set value
Calling it repeatedly in loops (layout cost)
Expecting to write through it (it’s read-only)

Boss battleSet a color in CSS, then read it back with getComputedStyle (el.style would be empty).

Example code

<!doctype html><html><head><meta charset="utf-8"><style>#x{color:#8aff9d}</style></head>
<body style="background:#06040d;padding:20px"><p id="x">styled by CSS</p><pre id="o" style="color:#e6e0ff"></pre>
<script>document.getElementById('o').textContent='computed color: '+getComputedStyle(document.getElementById('x')).color;</script></body></html>

▶ Open the interactive comic issue

‹ Element.Style · Changing Inline Css ClassName · ClassList · The Css Hooks ›