Style Lab

Change CSS properties one at a time with the .style object.

Scoreboard preview

Home 24 — Guest 21

No inline styles applied yet.

Apply styles

Important HTML

JavaScript writes camelCase properties on preview.style. Those become inline styles.

<div id="preview" class="scoreboard-preview">Home 24 — Guest 21</div>
<input id="color-input" type="color">
<input id="size-input" type="number">
<input id="bg-input" type="color">

Important JavaScript

Property names use camelCase. These writes become inline styles.

preview.style.color = colorInput.value;
preview.style.fontSize = sizeInput.value + "px";
preview.style.backgroundColor = bgInput.value;