CSS-Eigenschaften per JavaScript ändern

Mit JavaScript kannst du CSS nicht nur über Klassen steuern, sondern auch direkt am Element setzen. So änderst du Farben, Größen oder Abstände zur Laufzeit – z. B. nach einem Klick oder einer Berechnung.

element.style

Über element.style greifst du auf die Inline-Styles eines Elements zu. Du liest und schreibst damit nur Styles, die direkt am Element stehen – nicht die aus einer CSS-Datei.

1const box = document.querySelector(".box");
2
3console.log(box.style);
4// CSSStyleDeclaration – enthält die Inline-Styles des Elements

Einzelne CSS-Eigenschaften ändern

Einzelne Eigenschaften setzt du über element.style in camelCase: background-color wird zu backgroundColor, font-size zu fontSize.

1const box = document.querySelector(".box");
2
3box.style.backgroundColor = "#1e6bd9";
4box.style.color = "white";
5box.style.fontSize = "18px";

Mehrere Eigenschaften setzen

Für mehrere Styles auf einmal kannst du Object.assign nutzen oder alles in style.cssText als CSS-String schreiben.

1const box = document.querySelector(".box");
2
3Object.assign(box.style, {
4    backgroundColor: "#1e6bd9",
5    color: "white",
6    padding: "16px",
7    borderRadius: "8px",
8});
9
10// Alternative: cssText
11box.style.cssText = "background-color: #1e6bd9; color: white; padding: 16px;";