CSS-Stile ändern

An der Atelierwand hängt schon ein Farbchip. Die Überschrift heißt Oak, die Fläche sagt open. Die Regel #swatch im Stylesheet setzt color auf navy und font-size auf 16px. Die Klasse dusk sitzt noch nicht auf der Fläche. Ihre Regel ist font-style: italic. CSS aus JavaScript ändern heißt, den Inline-Stil zu schreiben oder diese Klasse zu setzen. Das Wort open bleibt stehen.
element.style zeigt nur Inline-Deklarationen. Darum sind swatch.style.color und swatch.style.fontSize vor dem ersten Schreiben leere Zeichenketten. Die genutzte Größe liefert getComputedStyle(swatch).fontSize: 16px.
swatch.style.color = "teal" und swatch.style.fontSize = "22px" speichern diese Inline-Werte. style.font-size mit Punkt ist ein Syntaxfehler. Den Hintergrund setzt diese Seite mit setProperty("background-color", "wheat"). Danach lesen getPropertyValue("background-color") und style.backgroundColor beide wheat.
classList.add("dusk") hängt nur die Klasse an. style.color bleibt teal, style.fontStyle bleibt leer, und getComputedStyle(swatch).fontStyle wird italic.
Ein Nebenversuch: cssText = "color: maroon;". Die Zeile ersetzt jede Inline-Deklaration. Schriftgröße und Hintergrund werden leer, die Klasse dusk bleibt. Die Seitendemo führt diese Zeile nicht aus. Sie merkt sich teal und löscht mit removeProperty("color") nur die Inline-Farbe. Die Zeile unter dem Chip lautet teal / 22px / empty / dusk. Der Text der Fläche ist weiter open.

Die Stilangabe, kein neuer Satz auf dem Chip

Die vorige Seite schrieb textContent, innerHTML und insertAdjacentHTML und änderte die Wörter auf dem Fährzettel. Hier weist du der Fläche kein textContent zu, du parst kein Tag und du vergleichst keine Suchaufrufe. getElementById gibt dir nur den Chip. Es geht um die Inline-Angabe und das Klassen-Token.

Was jede Zuweisung auf der Fläche lässt

Die Fläche beginnt mit dem Wort open. navy und 16px kommen aus dem Stylesheet, ein Inline-Stil fehlt noch. Lies die Zeilen der Reihe nach. Die Zeile cssText ist ein Nebenversuch. Die Seitendemo endet bei removeProperty und führt dieses Leeren nicht aus.

element.style ist nur die Inline-Deklaration. Eine Stylesheet-Regel erscheint dort erst, wenn ein Skript sie in den Inline-Stil kopiert. getComputedStyle liest den genutzten Wert, nachdem Blatt, Klasse und Inline-Stil zusammenkommen. Eine Inline-Eigenschaft schlägt das Blatt für dieselbe Eigenschaft. classList ändert das Klassen-Token. Es schreibt nicht style.color und nicht style.fontStyle. cssText ersetzt das ganze style-Attribut mit einer Zeichenkette. removeProperty löscht eine Inline-Eigenschaft und lässt den Rest stehen.

Den Chip lesen, bevor du schreibst

Die Datei öffnet mit der Überschrift Oak, dem Text open und dem Blatt darüber. Noch keine Zuweisung. Die ersten drei Logs fragen den Inline-Stil. Das vierte fragt die genutzte Größe.

Die Logs sind open, eine leere Zeichenkette, eine leere Zeichenkette und 16px. Die genutzte Farbe ist navy. Der Browser meldet sie als rgb(), nicht als das Wort navy. style.color ist weiter leer, also ist dieser Log nicht navy. Die Überschrift Oak ist ein anderes Element. Spätere Zuweisungen ändern das Wort open nicht.

CamelCase schreibt die Inline-Werte

color und fontSize sind Eigenschaften der Stilangabe. Der CSS-Name font-size wird in JavaScript zu fontSize. Ein gepunktetes style.font-size ist Subtraktion, deshalb nutzt die Datei es nicht.

Die Logs sind teal, 22px und eine leere Zeichenkette. Der Hintergrund ist noch nicht gesetzt. Die genutzte Schriftgröße ist jetzt 22px, weil der Inline-Wert die 16px des Blatts schlägt. Das Wort auf der Fläche bleibt open.

Ein Name mit Bindestrich geht über setProperty

setProperty nimmt den CSS-Namen inklusive Bindestrich. getPropertyValue liest denselben Namen. Die CamelCase-Eigenschaft backgroundColor liest den gerade gespeicherten Wert.

Beide Logs sind wheat. color bleibt teal und fontSize bleibt 22px. Dieser Aufruf fügt eine Inline-Eigenschaft hinzu. Er löscht die schon gesetzten nicht.

Die Klasse füllt style.fontStyle nicht

.dusk sagt font-style: italic. Die Klasse setzt das Token dusk auf das Element. Der Wert italic lebt in der Stylesheet-Regel, darum bleibt die Inline-Zeichenkette fontStyle leer. Die Inline-Farbe ist weiter teal. Die Klasse hat sie nicht ersetzt.

Die Logs sind true, teal, eine leere Zeichenkette und italic. contains prüft das Token. style.fontStyle prüft die Inline-Angabe. getComputedStyle prüft den genutzten Wert. Das sind drei verschiedene Lesarten.

cssText ersetzt den ganzen Inline-Stil

Dieser Block ist ein Nebenversuch. Führe ihn erst aus, wenn teal, 22px, wheat und dusk schon stehen. cssText schreibt ein neues style-Attribut und verwirft jede Inline-Eigenschaft, die in der Zeichenkette fehlt. Die Seitendemo weiter unten enthält diese Zeile nicht.

Die Logs sind maroon, eine leere Zeichenkette, eine leere Zeichenkette und true. Die inline gesetzten 22px und wheat sind weg. Die Klasse dusk ist noch da, weil cssText das style-Attribut ändert, nicht das class-Attribut. Der Flächentext bleibt open.

Eine Zeile unter dem Chip

Das Skript steht am Ende von body, nachdem Chip und Stylesheet da sind. Es setzt teal, 22px und wheat, hängt dusk an, merkt sich das Wort teal und entfernt nur die Inline-Farbe. Es weist cssText nicht zu. Eine leere Inline-Farbe schreibt es als das Wort empty, damit die Zeile lesbar bleibt.

Die Zeile lautet teal / 22px / empty / dusk. saved hält teal von vor removeProperty. Danach ist style.color leer und style.fontSize weiter 22px. Der Hintergrund bleibt wheat. Das Klassen-Token bleibt dusk, also ist das genutzte font-style italic. Die genutzte Farbe fällt auf das Blatt zurück, navy, weil die Inline-Farbe weg ist. Der Flächentext bleibt open. Die nächste Seite baut neue Elemente. Sie zeigt keinen weiteren Weg, diese Stileigenschaften zu schreiben.

Den Chip prüfen

1. Text, die zwei Inline-Zeichenketten und die berechnete Schriftgröße loggen: open, zwei leere Zeichenketten und 16px
2. color auf teal und fontSize auf 22px setzen, dann teal, 22px und ein leeres backgroundColor erwarten
3. Den Hintergrund mit setProperty setzen und wheat aus beiden Lesarten erwarten, dann dusk hinzufügen und true, teal, ein leeres fontStyle und berechnetes italic erwarten
4. Im Nebenversuch cssText auf die Farbe maroon setzen und maroon, ein leeres fontSize, einen leeren Hintergrund und dusk weiterhin true erwarten
5. Die Seitzeile lesen und teal / 22px / empty / dusk erwarten, den Flächentext lesen und open erwarten

Fehlgriffe an diesem Chip

Die Seite bleibt offen. Die Zuweisung hatte den falschen Wert.

• style.color am Anfang lesen und navy erwarten
• swatch.style.font-size schreiben; der Parser lehnt das ab
• Erwarten, dass classList.add("dusk") italic in style.fontStyle speichert
• Erwarten, dass dieselbe Klasse style.color von teal wegändert
• cssText zuweisen und die inline gesetzten 22px behalten wollen
• cssText zuweisen und erwarten, dass die Klasse dusk verschwindet
• removeProperty("color") aufrufen und erwarten, dass fontSize auf 16px zurückfällt
• Hier textContent auf die Fläche setzen; die vorige Seite hat Wörter geändert
• Hier createElement aufrufen; die nächste Seite baut neue Knoten

Das nimmst du mit

• element.style liest Inline-Deklarationen; am Anfang ist style.color leer und die genutzte Größe 16px
• style.color und style.fontSize speichern teal und 22px
• setProperty("background-color", "wheat") entspricht style.backgroundColor
• classList.add("dusk") lässt style.fontStyle leer und den genutzten Stil italic
• cssText = "color: maroon;" löscht die anderen Inline-Werte und behält die Klasse
• removeProperty("color") löscht nur die Farbe, darum kann die Seitzeile weiter 22px zeigen
• Die Zeile lautet teal / 22px / empty / dusk, der Flächentext bleibt open