Styles & classes

JavaScript chooses the look; CSS designs it

An element is one tag on the page, such as a button. Its look can come from several places:

• Stylesheet rules: CSS in a file or a <style> tag, such as .warning { color: crimson; }.
• Classes: names in the element's class attribute. Each name picks rules from the stylesheet.
• Inline styles: CSS written in the element's own style attribute.
• Inherited values: values a child element takes from its parent, such as text color.
• Browser defaults: the look the browser gives each tag before any of your CSS.
• Custom properties: CSS values with a name you choose, such as --hue.

JavaScript can change all of these. The skill is to pick the smallest tool that does the job. Here is the simple rule:

• Classes for looks you designed ahead of time, such as "open" or "error".
• Inline styles for live numbers, such as where the mouse is.
• Custom properties to hand one value to CSS, so CSS still does the drawing.

When you want to know the final look the browser worked out, use getComputedStyle.

In this lesson you will:

• add and remove classes on a real element with classList,
• see what el.style can and cannot read,
• read the final look with getComputedStyle,
• change a whole theme with one custom property.

className is the element's class attribute as one string. It is not called class because class is a reserved word in JavaScript: a word the language keeps for itself. Setting className replaces every class at once:

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

Line 1 gives the button three classes and throws away any it had before. Line 2 prints the new string.

Most of the time you want to change just one class. The next example does that. Each name inside the class string is called a token.

const button = document.querySelector("button");
button.className = "button is-ready";
button.classList.add("is-busy");
button.classList.remove("is-ready");
console.log(button.className);

1. Line 1 finds the button.
2. Line 2 replaces the whole string with button is-ready.
3. Line 3 adds one token, is-busy.
4. Line 4 removes one token, is-ready.
5. Line 5 prints button is-busy.

The button class stays, because add and remove touch only the token you name. That is why classList is safer than building the whole class string again on every click.

classList is a DOMTokenList: a list of the tokens, tied to the real class attribute. It is live, which means a change to the list changes the attribute right away, and the other way round. It never stores the same token twice. Its methods:

• add(token) adds a token.
• remove(token) removes a token. If it is not there, nothing happens.
• toggle(token) adds the token if it is missing, and removes it if it is there.
• toggle(token, force) takes a second argument, force. With true it only adds; with false it only removes.
• replace(oldToken, newToken) swaps one token for another.
• contains(token) answers true or false: is the token there?

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 methods on a real element. Watch what two of them give back:

• toggle(token, force) gives back true if the token is there after the call, and false if it is not.
• replace(oldToken, newToken) gives back true if the old token was there and got swapped, and false if it was missing.

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);

Tabs need one more step. A screen reader is a program that reads the page aloud for people who cannot see it. It does not see your CSS classes. It reads the aria-selected attribute to know which tab is chosen.

function showTab(tab, active) {
  tab.classList.toggle("is-active", active);
  tab.setAttribute("aria-selected", String(active));
}

const tab = document.querySelector("[role=tab]");
showTab(tab, true);
console.log(tab.className, tab.getAttribute("aria-selected"));

1. Line 2 adds is-active when active is true, and removes it when it is false. The class changes how the tab looks.
2. Line 3 writes the same true or false into aria-selected as a string. This tells the screen reader.
3. Line 8 prints tab is-active true.

The class and the attribute do two different jobs, so update both whenever the tab changes.

el.style reads and writes only the element's inline style attribute. Say a class makes the text purple. Then el.style.color is still an empty string, "". It stays empty until JavaScript or the HTML sets a color in the style attribute itself.

There are two ways to write a CSS property name:

• With a dot, use camelCase: drop the dashes and start each later word with a capital letter, as in style.backgroundColor.
• With setProperty, use the CSS spelling with dashes, called kebab-case, as in style.setProperty("border-radius", "16px").

Two more rules:

• If a value is not valid CSS, the browser ignores it. You get no error.
• Most sizes need a unit, such as px. A bare number like 100 is not a valid width.

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");

style.cssText is the whole style attribute as one string. Setting it replaces every inline style at once.

const box = document.querySelector(".box");
box.style.color = "crimson";
box.style.cssText = "background-color: gold; width: 100px;";
console.log(box.style.color);
console.log(box.style.width);

1. Line 2 sets an inline color, crimson.
2. Line 3 replaces the whole inline style with a background and a width. The color is gone.
3. Line 4 prints an empty line, because there is no inline color any more.
4. Line 5 prints 100px.

Only use cssText when you really want to replace every inline style.

The table compares the four tools. Read each row as: "this tool is good for this, but not for that."

el.style sees only inline styles. getComputedStyle(el) gives you the final look instead. The browser works it out from every place a style can come from: stylesheet rules, classes, inline styles, inherited values, and browser defaults.

The values come back in one standard form, called resolved values. For example, colors often come back as rgb(...), and sizes come back 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);

A pseudo-element is a part of an element that CSS creates, such as ::before. To read its style, pass its name as the second argument: getComputedStyle(el, "::before").

Reading computed style can make the browser stop and recalculate the styles of the page first. So read it once, keep the values you need, and don't read it again and again inside a loop that runs many times a second, such as an animation.

A custom property is a CSS property whose name you make up. The name starts with two dashes, such as --hue or --brand-color. A CSS rule reads it with var(--hue). Some facts about custom properties:

• The letter case matters: --hue and --Hue are two different names.
• Child elements get the value from their parent, like text color.
• You set one with setProperty and read it with getPropertyValue.
• The dot form can't write a name that starts with --, so style.--hue does not work.

In code, JavaScript sets one custom property and lets CSS do the design work. JavaScript keeps the changing data. CSS decides how that data turns into colors and borders.

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();

const panel = document.querySelector("#panel");
panel.style.setProperty("--hue", "320");
console.log(getComputedStyle(panel).getPropertyValue("--hue").trim());

1. Line 1 finds the panel.
2. Line 2 sets --hue to "320" on the panel.
3. Line 3 reads the final value back. trim() removes any spaces around it. It prints 320.

JavaScript chose the value. The CSS rule still decides how that hue becomes a background, a border, or a badge. Write the dashes and the letter case the same way in both places.

setProperty also takes a third argument, "important", as in setProperty("color", "red", "important"). It works like !important in CSS: a flag that makes a value win over almost every other rule. Use it rarely.

Newer browsers also let you give a custom property a type, such as a number or a color. Then the browser can animate it smoothly. In CSS you write @property; in JavaScript you call CSS.registerProperty. Check that the browser has the feature before you depend on it.

Real pages use all three tools. For example:

• A menu opens when JavaScript adds a class.
• A panel you drag follows the mouse through an inline transform style.
• A theme editor hands the color a user picked to CSS as a custom property.

A dark-mode switch is a good job for a class. The code below does not set ten colors. It turns on one page state, and CSS holds all the dark colors.

const page = document.documentElement;
page.classList.toggle("theme-dark", true);
console.log(page.classList.contains("theme-dark"));

1. Line 1 gets the <html> element, the root of the page.
2. Line 2 calls toggle with true, so theme-dark is always added, never removed.
3. Line 3 prints true, because the page now has the theme-dark class.

toggle also gives back true or false. A real switch can use that to update its own label, such as "Dark mode: on".

Here is the lesson's rule in three small functions:

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));
}

1. Line 2 opens or closes the menu with a class. "Open" is a look designed in CSS.
2. Line 6 moves the tooltip with an inline style. The numbers x and y change every time the mouse moves.
3. Line 10 hands one hue to CSS as the custom property --brand-hue.

Common misconceptions

• "className and classList store classes in two different places." Both show the same class attribute. Change one, and the other changes too.
• "el.style.color tells me the color I see." It only tells you the inline color. Use getComputedStyle(el).color for the final color.
• "JavaScript adds the unit for me." It does not. A real element ignores style.width = 100. Write "100px" or another size with a unit.
• "Inline style is always bad." It is a poor choice for looks you reuse. It is a good choice for live numbers, such as the mouse position, a measured size, or progress.
• "Reading computed style costs nothing." It can make the browser recalculate styles first. Don't read it again and again inside a fast loop.
• "Custom properties are JavaScript variables." They are CSS properties. JavaScript can set them, but CSS decides what they change on the page.
• "Setting cssText adds one style." It replaces every inline style. Use style.setProperty when the other inline styles must stay.
• "The class I add last always wins." CSS also looks at how exact each rule's selector is (called specificity) and at !important. Adding a class can't beat a stronger rule.
• "A custom property belongs to one element only." Child elements get it from their parent. Set it on a panel, and every card inside can read it, unless a card sets its own.

The table sums up each tool. Read each row as: "this tool reads this, writes that, and gives back this."

Key takeaways

• className is the whole class attribute as one string. classList is a live list of the class names, with methods that change one name at a time.
• toggle(token, force) gives back the new state. replace gives back whether the swap worked.
• el.style reads and writes inline styles only. The browser ignores a value that is not valid CSS, and you get no error.
• getComputedStyle reads the final values. It can make the browser recalculate styles, so don't call it again and again in a fast loop.
• A custom property hands one changing value from JavaScript to CSS, and many CSS rules can use it.

Final definition: styles and classes are the tools JavaScript uses to pick a look designed in CSS (a class), set a live value (an inline style or a custom property), and read the final look the browser worked out (getComputedStyle).

Up next: Sizes, scrolling & coordinates.