Stile ändern

Wie eine Seite aussieht (Farben, Größen, Schriften), beschreibt CSS. Eine CSS-Regel hat einen Selektor, der sagt, für welche Elemente die Regel gilt, und danach in geschweiften Klammern, wie sie aussehen sollen:

h1 {
    color: purple;
    background-color: yellow;
}

Diese Regel macht die Hauptüberschrift lila auf gelbem Hintergrund. color und background-color sind CSS-Eigenschaften, purple und yellow ihre Werte. Eine Seite kann ihr CSS im Element style in head haben; in der index.html dieser Übung findest du eines.

JavaScript kann das Aussehen eines Elements über seine Eigenschaft style ändern:

const ueberschrift = document.querySelector("h1");
ueberschrift.style.color = "purple";
ueberschrift.style.fontSize = "48px";

Die Werte sind Text in Anführungszeichen und werden genauso geschrieben wie in CSS. CSS-Eigenschaften mit Bindestrich werden in JavaScript in camelCase geschrieben: background-color wird zu backgroundColor, font-size wird zu fontSize. Das liegt daran, dass ein Bindestrich in JavaScript Minus bedeutet: JavaScript würde ueberschrift.style.background-color = "yellow"; als die Subtraktion ueberschrift.style.background - color lesen, und einer Subtraktion kann man keinen Wert zuweisen. Vom ganzen Skript würde nichts laufen, und die Konsole würde SyntaxError: Invalid left-hand side in assignment anzeigen.

Stile einzeln zu setzen wird schnell lang. Häufiger bereitet man das Aussehen im CSS der Seite als Klasse vor, und JavaScript fügt die Klasse einem Element nur hinzu oder entfernt sie. Die Seite in dieser Übung hat zum Beispiel eine Liste (ul, mit einem Element li für jeden Eintrag) und diese CSS-Regel für Elemente mit der Klasse erledigt:

.erledigt {
    color: gray;
    text-decoration: line-through;
}

Jedes Element hat die Eigenschaft classList mit diesen Methoden:

• classList.add("erledigt") fügt dem Element die Klasse erledigt hinzu,
• classList.remove("erledigt") entfernt sie,
• classList.toggle("erledigt") fügt sie hinzu, wenn das Element sie nicht hat, und entfernt sie, wenn es sie hat. Das ist praktisch für Buttons, wie du in der nächsten Übung sehen wirst.

Schreibe den Klassennamen ohne Punkt: add("erledigt"), nicht add(".erledigt"). Der Punkt gehört nur in Selektoren. Mit ihm würdest du eine Klasse namens .erledigt hinzufügen, auf die keine CSS-Regel passt, sodass sich nichts ändern würde.