The Old NetISSUE #39 of 60

element.style · changing inline css

Pixel PeteVSQuirks Mode

Pixel Pete sayselement.style sets inline CSS one property at a time using camelCase names.

el.style.backgroundColor = "red" writes an inline style. Property names are camelCased (background-color → backgroundColor). This was DHTML's main way to change appearance dynamically. It only sets inline styles and only affects one element — for many elements or state changes, toggling a CSS class is cleaner and faster.

Power-ups you unlock

el.style.prop = value (camelCase)
Writes inline styles only
One element at a time
Prefer class toggles for state

Quirks Mode attacks — common mistakes

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

Boss battleChange an element’s background and font size via element.style.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><div id="x">style me</div>
<script>const x=document.getElementById('x');x.style.backgroundColor='#b388ff';x.style.color='#06040d';x.style.padding='10px';</script></body></html>

▶ Open the interactive comic issue

‹ Cloning Nodes · CloneNode Deep Vs Shallow Computed Styles · GetComputedStyle ›