JavaScript — Changing CSS
JavaScript can read and modify the styles of any HTML element. You can set inline styles directly, toggle CSS classes, read computed styles, and even manipulate CSS custom properties — all at runtime.
The element.style Property
Every DOM element has a style object that maps to its inline styles. CSS property names are written in camelCase (e.g. backgroundColor instead of background-color).
const box = document.getElementById("box");
box.style.backgroundColor = "royalblue";
box.style.color = "white";
box.style.padding = "20px";
box.style.borderRadius = "8px";
console.log(box.style.backgroundColor); // royalblue
console.log(box.style.padding); // 20pxclassList — add, remove, toggle, contains
Instead of manipulating inline styles, it is usually better to toggle CSS classes. The classList property provides convenient methods to manage an element's class list.
const card = document.getElementById("card");
card.classList.add("active");
console.log(card.classList.contains("active")); // true
card.classList.add("highlight", "shadow");
console.log([...card.classList]); // ["active", "highlight", "shadow"]
card.classList.remove("shadow");
console.log(card.classList.contains("shadow")); // false
// toggle: add if missing, remove if present
card.classList.toggle("highlight");
console.log(card.classList.contains("highlight")); // false
card.classList.toggle("highlight");
console.log(card.classList.contains("highlight")); // true| classList Method | Description |
|---|---|
| add(cls, ...) | Add one or more classes |
| remove(cls, ...) | Remove one or more classes |
| toggle(cls) | Add the class if absent, remove if present |
| contains(cls) | Returns true if the class is present |
| replace(old, new) | Replace old class with new class |
getComputedStyle()
element.style only reads inline styles. To get the final, computed value of any CSS property (including styles from stylesheets), use window.getComputedStyle().
const box = document.getElementById("box");
const computed = window.getComputedStyle(box);
console.log(computed.width); // e.g. "200px"
console.log(computed.fontSize); // e.g. "16px"
console.log(computed.display); // e.g. "block"
console.log(computed.backgroundColor); // e.g. "rgb(65, 105, 225)"CSS Custom Properties via JS
CSS custom properties (variables) defined with -- can be read and set from JavaScript using getPropertyValue() and setProperty() on an element's style or on the document root.
// Assume CSS: :root { --primary: #3498db; --gap: 16px; }
const root = document.documentElement;
// Read a CSS variable
const primary = getComputedStyle(root).getPropertyValue("--primary");
console.log(primary.trim()); // #3498db
// Change a CSS variable at runtime
root.style.setProperty("--primary", "#e74c3c");
console.log(getComputedStyle(root).getPropertyValue("--primary").trim()); // #e74c3c
// Change gap
root.style.setProperty("--gap", "24px");
console.log(getComputedStyle(root).getPropertyValue("--gap").trim()); // 24pxDynamic Styling Patterns
A common pattern is to apply styles in response to user actions. Combining classList with CSS transitions produces smooth, maintainable animations without touching inline styles.
function toggleDarkMode() {
document.body.classList.toggle("dark");
const isDark = document.body.classList.contains("dark");
console.log("Dark mode:", isDark);
}
// Simulate toggling twice
toggleDarkMode(); // Dark mode: true
toggleDarkMode(); // Dark mode: false