Styles & classes

JavaScript chooses the look; CSS designs it

A DOM element can look different because of stylesheet rules, classes, inline styles, inherited values, browser defaults, and custom properties. JavaScript can touch all of those, but the professional skill is choosing the smallest tool that says what you mean.

The rule of thumb is simple: classes for designed states, inline styles for live numbers, and custom properties when CSS should still do the drawing. Then use getComputedStyle when you need to inspect the final result the browser actually resolved.

In this lesson you will operate a real classList, explore the traps of el.style, read resolved values with getComputedStyle, and use a custom property as a tiny theme thermostat.

className is the class attribute as one string. It has this name because class was already a reserved word in JavaScript. Setting it is sometimes useful when you want to replace the whole class attribute at once:

button.className = "button button--primary is-loading";
console.log(button.className);

Most day-to-day UI changes are better with classList. It is a live DOMTokenList: a token API connected to the element’s real attribute. It prevents duplicate class tokens and gives you purpose-built methods.

1const card = { className: "card" };Run2const classes = new Set(card.className.split(" "));3classes.add("is-raised");4card.classList.toggle("is-selected");5classes.delete("card");6const replaced = classes.delete("is-raised");7if (replaced) classes.add("is-flat");8card.className = [...classes].join(" ");9console.log(card.className);

Now try the same operations on a real element. Notice the return values: toggle(token, force) returns the resulting state, and replace(oldToken, newToken) returns a boolean telling you whether the old token existed.

1const card = document.querySelector(".demo-card");2card.classList.add("is-raised");3card.classList.remove("is-muted");4card.classList.toggle("is-selected");5card.classList.toggle("is-selected", true);6card.classList.replace("is-raised", "is-flat");7card.classList.contains("is-selected");8console.log(card.className);

el.style reflects only the inline style attribute. If a class makes text purple, el.style.color is still an empty string until JavaScript or HTML sets an inline color.

Dot form uses camelCase property names such as backgroundColor. The generic methods use CSS spelling such as background-color. Invalid values are silently ignored, and many lengths need a unit.

1const box = document.querySelector(".box");2box.classList.add("warning");3console.log(box.style.color);4box.style.backgroundColor = "gold";5box.style.setProperty("border-radius", "16px");6box.style.width = 100;7console.log(box.style.width);8box.style.width = "100px";9box.style.removeProperty("background-color");

If el.style is the inline paint can, getComputedStyle is a photo of the final look after the cascade, inheritance, default styles, and layout-dependent values have been considered. The values are resolved: colors often appear as rgb(...), and many lengths appear in pixels.

1const computed = getComputedStyle(box);2console.log(computed.color);3console.log(computed.width);4console.log(box.style.color);5console.log(getComputedStyle(box, "::before").content);

The second argument reads pseudo-elements, so getComputedStyle(el, "::before") can inspect generated content. Because a computed-style read can force style recalculation, read once outside hot animation loops and reuse the values you need.

CSS custom properties are names like --hue or --brand-color. They are case-sensitive, inherit like normal CSS properties, and must be changed with setProperty and read with getPropertyValue. Dot notation cannot spell a property that starts with --.

1:root { --hue: 210; }2.card { background: hsl(var(--hue) 80% 45%); }3 4panel.style.setProperty("--hue", "320");5const hue = getComputedStyle(panel).getPropertyValue("--hue").trim();

You can also pass a third argument to setProperty, such as setProperty("color", "red", "important"), but use it sparingly. Newer browsers support typed, animatable custom properties with @property in CSS and CSS.registerProperty in JavaScript; feature-detect before depending on them.

Real interfaces mix all three tools. A menu opens with a class, a dragged panel follows the pointer with a transform, and a theme editor passes one chosen hue into CSS as a custom property.

function updateMenu(menu, open) {
  menu.classList.toggle("is-open", open);
}

function moveTooltip(tooltip, x, y) {
  tooltip.style.transform = `translate(${x}px, ${y}px)`;
}

function setBrandHue(panel, hue) {
  panel.style.setProperty("--brand-hue", String(hue));
}

Common misconceptions

• “className and classList are separate storage.” They are two views of the same class attribute. Change one and the other reflects it.
• “el.style.color tells me the visible color.” It only tells you the inline color. Use getComputedStyle(el).color for the resolved color.
• “JavaScript adds units for CSS lengths.” It does not. width = 100 is ignored by a real DOM style declaration; use "100px" or another valid unit.
• “Inline style is always bad.” It is bad for reusable states, but excellent for real-time values such as coordinates, measured sizes, and progress numbers.
• “Computed styles are free to read anywhere.” They can force style recalculation, so avoid reading them in tight loops.
• “Custom properties are JavaScript variables.” They are CSS properties. JavaScript can set them, but CSS decides how they affect the final property values.

Key takeaways

• className is the whole class attribute string; classList is the live token API.
• toggle(token, force) returns the resulting state, and replace returns whether it succeeded.
• el.style reads and writes inline declarations only; invalid CSS values are silently ignored.
• getComputedStyle reads resolved final values and can trigger style recalculation.
• Custom properties are the bridge for dynamic values that CSS should reuse.

Final definition: styles and classes are the DOM tools for choosing designed states, applying dynamic inline values, and reading the browser’s final visual result.

Up next: Sizes, scrolling & coordinates.