CSS-Eigenschaft mit JavaScript ändern

Um eine CSS-Eigenschaft mit JavaScript zu ändern, wählen Sie das Zielelement aus und setzen eine Eigenschaft seines style-Objekts. Für mehrere zusammengehörige Stilregeln fügen Sie stattdessen eine CSS-Klasse hinzu. Mit einer ID oder einem CSS-Selektor wählen Sie ein einzelnes Element aus; wenn alle Treffer geändert werden sollen, verwenden Sie eine klassenbasierte Sammlung. Das Browserobjekt document steht bereit; jQuery ist optional.

Eine CSS-Eigenschaft mit element.style ändern

Verwenden Sie element.style, wenn Sie einen einzelnen Inline-Stil setzen möchten. CSS-Eigenschaftsnamen mit Bindestrich werden in JavaScript in camelCase geschrieben: Aus border-color wird borderColor. Dieses kleine Testobjekt macht das Muster zum Auswählen und Zuweisen in einer JavaScript-Umgebung ausführbar. Auf einer Webseite ist document das tatsächliche Dokument des Browsers.

Führen Sie dieses Beispiel aus:

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

const input = { style: {} };
const document = {
  getElementById(id) {
    return id === "email" ? input : null;
  }
};

const element = document.getElementById("email");
if (element) {
  element.style.borderColor = "red";
}

Die Zuweisung ändert den Inline-Stil des Elements. Sie bearbeitet keine Regel im Stylesheet und entfernt auch keine anderen Stile. Im Browser lautet die entsprechende Auswahl document.getElementById("email"); prüfen Sie den Rückgabewert, bevor Sie Eigenschaften des Elements auslesen oder ändern.

Mehrere Stile mit einer CSS-Klasse anwenden

Eine Klasse lässt sich leichter pflegen, wenn ein Zustand mehrere aufeinander abgestimmte Deklarationen benötigt. Definieren Sie die Klasse im Stylesheet und wenden Sie sie mit classList.add() an; mit classList.remove() entfernen Sie sie wieder. Eine Klasse für Eingabefehler kann beispielsweise sowohl einen roten Rahmen als auch roten Text festlegen. classList lässt andere Klassen des Elements bestehen.

Die Zuweisung element.className = "input-error" ändert ebenfalls das Klassenattribut, ersetzt aber die gesamte Klassenzeichenfolge. Vorhandene Klassen, etwa für Layout oder Validierung, gehen verloren, sofern sie nicht in der neuen Zeichenfolge enthalten sind. Verwenden Sie classList zum gezielten Hinzufügen und Entfernen einzelner Klassen. className eignet sich, wenn Sie bewusst alle Klassen ersetzen möchten.

Elemente anhand ihrer Klasse mit getElementsByClassName auswählen

document.getElementsByClassName("input-blue-border") gibt eine Live-HTMLCollection der passenden Elemente zurück, kein Array. Die Sammlung wird aktualisiert, wenn passende Elemente in das Dokument eingefügt oder daraus entfernt werden. Um alle aktuellen Treffer zu ändern, durchlaufen Sie die Sammlung mit einer for...of-Schleife und aktualisieren den Stil oder die Klassenliste jedes Elements. Wenn Sie Array-Methoden benötigen, wandeln Sie die Sammlung zuerst mit Array.from(...) um.

Sie können die Methode auch auf einem Element aufrufen, um passende Nachfahren innerhalb dieses Elements zu finden. Als Argument übergeben Sie den Klassennamen ohne vorangestellten Punkt. .input-blue-border verwenden Sie nur mit einer API für CSS-Selektoren wie querySelector().

Ein Element mit getElementById oder querySelector auswählen

document.getElementById("email") sucht ein Element anhand seiner ID und gibt das passende Element oder null zurück. IDs sollten im Dokument eindeutig sein. Doppelte IDs sind ungültiges Markup; verlassen Sie sich daher nicht darauf, welches der mehrfach vorhandenen Elemente zurückgegeben wird.

document.querySelector(".input-blue-border") akzeptiert einen CSS-Selektor und gibt das erste passende Element zurück oder null, wenn es keinen Treffer gibt. Damit können Sie nach einer ID (#email), einer Klasse (.input-blue-border) oder einem Tag (input) suchen. Obwohl der Selektor mehrere Elemente treffen könnte, gibt querySelector() nur den ersten Treffer zurück. Prüfen Sie auf null, bevor Sie den Stil oder die Klassen ändern.

Den passenden Selektor wählen und fehlende oder mehrere Treffer behandeln

Wählen Sie den Selektor passend zum Zielelement und zur Anzahl der Elemente, die Sie ändern möchten: Verwenden Sie getElementById für ein einzelnes Element mit eindeutiger ID oder querySelector(), wenn ein CSS-Selektor praktischer ist und nur der erste Treffer benötigt wird. Mit getElementsByClassName wählen Sie alle Elemente aus, deren Klasse geändert werden soll. Für eine einzelne Stilregel setzen Sie element.style; für einen benannten Zustand mit mehreren Deklarationen schalten Sie eine Klasse um.

Eine Auswahl kann fehlschlagen, wenn das Element noch nicht im Dokument vorhanden ist, die ID oder Klasse falsch geschrieben wurde oder das Markup noch nicht geladen ist. Führen Sie die Auswahl erst aus, wenn das betreffende Markup vorhanden ist, oder prüfen Sie den Rückgabewert, bevor Sie auf style oder classList zugreifen. Ein mögliches Muster im Browser ist const element = document.querySelector(".notice"); if (element) element.classList.add("is-visible");. Wenn nur ein Element aus einer Klassensammlung geändert werden soll, wählen Sie es gezielt aus. Um alle Elemente zu ändern, durchlaufen Sie die Sammlung.

Zusammenfassung

Wählen Sie zuerst das gewünschte Element aus. Setzen Sie eine einzelne Inline-Deklaration mit element.style oder verwenden Sie classList, um mehrere Stile anzuwenden und vorhandene Klassen beizubehalten. getElementById wählt anhand einer ID aus, querySelector() gibt den ersten Treffer eines CSS-Selektors zurück und getElementsByClassName liefert eine Live-Sammlung, mit der sich alle Elemente einer Klasse ändern lassen. Prüfen Sie das Ergebnis einer Auswahl für ein einzelnes Element, bevor Sie es verwenden, und durchlaufen Sie die Treffer, wenn mehrere Elemente geändert werden sollen.