JavaScript CSS Styles

A studio wall already shows a paint chip. The heading says Oak. The swatch says open. A stylesheet rule on #swatch sets color to navy and font-size to 16px. The class dusk is not on the swatch yet, and its rule is font-style: italic. Changing CSS from JavaScript means writing the inline style, or adding that class. It does not mean replacing the word open. Before any script write, swatch.style.color and swatch.style.fontSize are empty strings, because element.style shows only inline declarations. getComputedStyle(swatch).fontSize is 16px, the used size from the sheet. swatch.style.color = "teal" and swatch.style.fontSize = "22px" store those inline values. The dotted name style.font-size is a syntax error. This page sets the background with swatch.style.setProperty("background-color", "wheat"). After that, getPropertyValue("background-color") and style.backgroundColor both read wheat. swatch.classList.add("dusk") adds the class. style.color stays teal, style.fontStyle stays empty, and getComputedStyle(swatch).fontStyle is italic. A separate experiment, swatch.style.cssText = "color: maroon;", replaces every inline declaration, so the inline font size and background become empty while dusk remains. The page demo does not run that line. It saves teal, then swatch.style.removeProperty("color") clears only the inline color. The line reads teal / 22px / empty / dusk. The swatch text is still open.

The style declaration, not a new sentence on the chip

The previous page wrote textContent, innerHTML, and insertAdjacentHTML and changed the words on a ferry slip. This page does not assign textContent on the swatch, does not parse a tag, and does not compare ways to find a node. getElementById only hands you the chip. The lesson is the inline style and the class token.

What each write leaves on the swatch

The swatch starts as the word open, with navy and 16px coming from the stylesheet and no inline style yet. Read the rows in order. The cssText row is a side experiment. The page demo stops at removeProperty and does not run that wipe.

element.style is the inline declaration only. A stylesheet rule never appears there until a script copies it into the inline style. getComputedStyle reads the used value after the sheet, the class, and the inline style are combined. An inline property wins over the sheet for that same property. classList edits the class token. It does not write style.color or style.fontStyle. cssText replaces the whole inline style attribute in one string. removeProperty deletes one inline property and leaves the rest.

Read the chip before you write

The file opens with the heading Oak, the swatch text open, and the sheet above. No assignment has run. The first three logs ask the inline style. The fourth asks the used size.

The logs are open, an empty string, an empty string, and 16px. The used color is navy, which the browser reports in rgb() form, not as the word navy. style.color is still empty, so that log is not navy. The heading Oak is a different element. Later writes never change the word open.

camelCase writes the inline values

color and fontSize are properties of the style declaration. The CSS name font-size becomes fontSize in JavaScript. A dotted style.font-size is subtraction syntax, so the file does not use it.

The logs are teal, 22px, and an empty string. The background has not been set. The used font size is now 22px, because the inline size beats the sheet's 16px. The word on the swatch is still open.

A hyphenated name goes through setProperty

setProperty takes the CSS property name, hyphen included. getPropertyValue reads that same name. The camelCase property backgroundColor reads the value you just stored.

Both logs are wheat. color is still teal and fontSize is still 22px. This call adds one inline property. It does not clear the ones already there.

The class does not fill style.fontStyle

.dusk says font-style: italic. Adding the class puts dusk on the element. The italic value lives in the stylesheet rule, so the inline fontStyle string stays empty. The inline color is still teal, which means the class did not replace it.

The logs are true, teal, an empty string, and italic. contains checks the token. style.fontStyle checks the inline declaration. getComputedStyle checks the used value. Those three readings are different.

cssText replaces the whole inline style

This block is a side experiment. Run it only after teal, 22px, wheat, and dusk are already set. Assigning cssText writes a new style attribute and drops every inline property that is not in that string. The page demo further down does not include this line.

The logs are maroon, an empty string, an empty string, and true. The inline 22px and wheat are gone. The class dusk is still there, because cssText edits the style attribute, not the class attribute. The swatch text is still open.

One line under the chip

The script sits at the end of the body, after the chip and the stylesheet exist. It sets teal, 22px, and wheat, adds dusk, saves the word teal, then removes only the inline color. It does not assign cssText. An empty inline color is written as the word empty so the line stays readable.

The line reads teal / 22px / empty / dusk. saved holds teal from before removeProperty. After that call, style.color is empty and style.fontSize is still 22px. The background is still wheat. The class token is still dusk, so the used font-style is italic. The used color falls back to the sheet, navy, because the inline color is gone. The swatch text is still open. The next page builds new elements. It does not introduce another way to write these style properties.

Check the chip

1. Log the text, the two inline strings, and the computed font size, and expect open, two empty strings, and 16px
2. Set color to teal and fontSize to 22px, then expect teal, 22px, and an empty backgroundColor
3. Set the background with setProperty and expect wheat from both readings, then add dusk and expect true, teal, an empty fontStyle, and computed italic
4. On the side experiment, assign cssText to color maroon and expect maroon, an empty fontSize, an empty background, and dusk still true
5. Read the page line and expect teal / 22px / empty / dusk, and read the swatch text and expect open

Misses on this chip

The page still opens. The assignment wrote the wrong kind of value.

• Reading style.color at the start and expecting navy
• Writing swatch.style.font-size, which the parser rejects
• Expecting classList.add("dusk") to store italic in style.fontStyle
• Expecting that class add to change style.color from teal
• Assigning cssText and expecting the 22px inline size to remain
• Assigning cssText and expecting the dusk class to disappear
• Calling removeProperty("color") and expecting fontSize to fall back to 16px
• Setting textContent on the swatch here; the previous page changed words
• Calling createElement here; the next page builds new nodes

Leave with this

• element.style reads inline declarations, so the opening style.color is empty while the used size is 16px
• style.color and style.fontSize store teal and 22px
• setProperty("background-color", "wheat") matches style.backgroundColor
• classList.add("dusk") leaves style.fontStyle empty and the used style italic
• cssText = "color: maroon;" clears the other inline values and keeps the class
• removeProperty("color") clears only the color, so the page line can still show 22px
• The line reads teal / 22px / empty / dusk, and the swatch text stays open