Stile direkt setzen

Manchmal reicht keine Klasse. Eine Fortschrittsanzeige, die bei 63 Prozent steht, kann nicht im Stylesheet stehen: die Zahl entsteht erst, während die Seite läuft.

01 / 03style schreibt inline

<p id="satz" class="hinweis">Ein Satz</p>

.hinweis {
  color: #2563eb;
  font-size: 20px;
}

const satz = document.getElementById("satz");

// Der Name steht in Binnenmajuskel: aus background-color
// wird backgroundColor. Dieselbe Umschreibung wie bei dataset.
satz.style.backgroundColor = "#fef08a";
satz.style.paddingLeft = "12px";

// Geschrieben wird ein style-Attribut am Element.
console.log(satz.outerHTML);

// Beim Lesen kommt nur zurück, was inline dasteht.
console.log("padding-left:", satz.style.paddingLeft);

// Die Farbe steht im Stylesheet, nicht inline. Also leer.
console.log("color inline:", JSON.stringify(satz.style.color));

// Dafür gibt es getComputedStyle: den Wert, der wirklich gilt.
const berechnet = getComputedStyle(satz);
console.log("color berechnet:", berechnet.color);
console.log("font-size berechnet:", berechnet.fontSize);

satz.style.backgroundColor = "#fef08a" schreibt ein style-Attribut an das Element, und weil ein Inline-Stil jede normale Regel aus dem Stylesheet schlägt, wirkt er sofort. Nur eine Deklaration mit !important kommt noch dagegen an, wie es die Kaskade im CSS-Kurs sagt; wenn eine gesetzte Farbe also nichts tut, lohnt der Blick ins Stylesheet, bevor du den Code verdächtigst. Das Attribut steht danach wirklich im Markup, allerdings nicht in deiner Schreibweise: Die erste Console-Zeile des Beispiels zeigt style="background-color: rgb(254, 240, 138); padding-left: 12px;". Der Browser übersetzt die Farbe schon beim Schreiben, aus #fef08a wird rgb(254, 240, 138), und satz.style.backgroundColor liest sie auch so zurück.

Der Name steht dabei in Binnenmajuskel: aus background-color wird backgroundColor, aus padding-left wird paddingLeft. Das ist dieselbe Umschreibung wie bei dataset in Lektion 10.5, nur in die andere Richtung gedacht. Der Grund ist derselbe: ein Bindestrich ist in JavaScript ein Minus und kann in einem Namen nicht vorkommen.

Beim Lesen ist style fast immer die falsche Adresse. satz.style.color liefert nur, was inline am Element steht. Kommt die Farbe aus dem Stylesheet, ist die Antwort ein leerer Text, obwohl der Satz sichtbar blau ist.

Wer den Wert wissen will, der wirklich gilt, nimmt getComputedStyle(el). Das liefert den fertig berechneten Stil, und zwar immer in der Form, die der Browser daraus gemacht hat: aus 20px wird 20px, aus #2563eb wird rgb(37, 99, 235).

Dieselben Werte zeigt der Inspector, ohne dass du eine Zeile dafür schreibst. Fahr mit dem Fadenkreuz über den Satz, dann stehen im Reiter Werte des Auskunftsstreifens color: rgb(37, 99, 235), font-size: 20px und der Hintergrund, den das Skript gerade gesetzt hat. Das ist dieselbe Quelle, aus der auch getComputedStyle liest. Der Unterschied ist nur, wer fragt: dein Programm oder du. Custom Properties stehen dort allerdings nicht, die beantwortet getComputedStyle(el).getPropertyValue("--farbe"), im Code oder in der Eingabezeile der Console.

02 / 03setProperty für alles mit Bindestrich

<div id="box">Eine Box</div>

#box {
  padding: 12px;
  color: #ffffff;
  background: var(--farbe, #94a3b8);
}

const box = document.getElementById("box");

// Namen mit Bindestrich gehen über setProperty. Für
// Custom Properties ist das der einzige Weg: box.style
// kennt keine Eigenschaft, die --farbe heißt.
box.style.setProperty("--farbe", "#2563eb");
console.log(box.outerHTML);

// Der Versuch ohne setProperty tut schlicht nichts.
box.style["--farbe"] = "#dc2626";
console.log("immer noch:", box.style.getPropertyValue("--farbe"));

// Lesen geht mit getPropertyValue, entfernen mit removeProperty.
console.log("gesetzt auf:", box.style.getPropertyValue("--farbe"));
box.style.removeProperty("--farbe");
console.log("nach dem Entfernen:", box.outerHTML);

Für Custom Properties gibt es keine Binnenmajuskel-Fassung. --farbe kann in JavaScript nicht als Eigenschaftsname stehen, und ein box.style["--farbe"] = "..." tut schlicht nichts: es legt eine Eigenschaft auf dem Objekt an, die den Browser nicht interessiert. Kein Fehler, keine Wirkung.

Der richtige Weg heißt setProperty("--farbe", "#2563eb"). Gelesen wird mit getPropertyValue("--farbe"), entfernt mit removeProperty("--farbe").

Genau dafür ist setProperty im Alltag da. Eine Seite, die ihre Farben über Custom Properties führt, braucht nur diese eine Zeile, und der Rest passiert im Stylesheet. Das ist deutlich weniger JavaScript als zehn einzeln gesetzte Farben.

03 / 03Wann style und wann eine Klasse

<div class="huelle"><div class="balken"></div></div>
<p id="text">Fertig</p>

.huelle {
  width: 200px;
  height: 14px;
  background: #e2e8f0;
}

.balken {
  width: 0;
  height: 100%;
  background: #2563eb;
}

.ist-fertig {
  color: #16a34a;
  font-weight: 700;
}

const erledigt = 7;
const gesamt = 10;
const anteil = Math.round((erledigt / gesamt) * 100);

// Diese Zahl steht in keinem Stylesheet, sie entsteht
// erst hier. Also gehört sie nach style.
document.querySelector(".balken").style.width = `${anteil}%`;

// Diese Farbe ist dagegen eine Design-Entscheidung und
// steht längst im Stylesheet. Also nur die Klasse schalten.
document.getElementById("text").classList.toggle("ist-fertig", anteil === 100);

// So nicht: dieselbe Aussage mit style. Sie funktioniert,
// aber jetzt steht eine Farbe des Designs im JavaScript.
// document.getElementById("text").style.color = "#16a34a";

console.log(`${anteil}% erledigt`);

Die ehrliche Regel hat zwei Hälften.

Kennst du den Wert vorher, gehört er ins Stylesheet. Eine Fehlermeldung ist rot, ein erledigter Punkt ist grün, ein verstecktes Element ist weg. Das sind Design-Entscheidungen, sie stehen im CSS, und JavaScript schaltet nur die Klasse. Wer sie stattdessen mit style.color setzt, verteilt das Design über zwei Dateien, und beim nächsten Umbau findet es niemand.

Entsteht der Wert zur Laufzeit, gehört er nach style. Eine Breite in Prozent, eine Position in Pixeln, ein Drehwinkel: die kann kein Stylesheet vorher kennen. Hier ist style nicht der faule Weg, sondern der einzige.

Im dritten Beispiel stehen beide Fälle nebeneinander. Die Breite des Balkens wird gerechnet, also gesetzt. Die grüne Schrift ist eine Design-Entscheidung, also eine Klasse. Die auskommentierte Zeile darunter zeigt, wie dieselbe Sache falsch herum aussähe: sie funktioniert, und trotzdem steht danach eine Farbe des Designs im JavaScript.

An diesem Balken siehst du die zwei Sorten Wert aus dem ersten Beispiel an einer Zahl. document.querySelector(".balken").style.width in der Eingabezeile der Console antwortet "70%", also das, was das Skript hineingeschrieben hat. getComputedStyle(document.querySelector(".balken")).width antwortet "140px": 70 Prozent von den 200 Pixeln der Hülle, ausgerechnet vom Browser. Der Prozentwert steht im Attribut, die Pixel stehen auf der Seite, und der Inspector zeigt am Balken dieselben 140 × 14.

Ein Zwischenweg deckt beides ab: setz eine Custom Property aus JavaScript und lass das Stylesheet damit rechnen. Der Wert kommt aus dem Programm, das Aussehen bleibt im CSS.