Verwendung dynamischer Stilinformationen

Das CSS Object Model (CSSOM), als Teil des DOM, stellt spezifische Schnittstellen bereit, die es ermöglichen, eine Vielzahl von Informationen bezüglich CSS zu manipulieren. Zuerst definiert in der DOM Level 2 Style Empfehlung, formen diese Schnittstellen nun eine Spezifikation, das CSS Object Model (CSSOM), das darauf abzielt, diese zu ersetzen.

In vielen Fällen, und wo immer möglich, ist es beste Praxis, Klassen dynamisch über die className Eigenschaft zu manipulieren, da das endgültige Erscheinungsbild aller Stil-Hooks in einem einzigen Stylesheet kontrolliert werden kann. Der JavaScript-Code wird zudem sauberer, da er sich nicht mit Stil-Details befassen muss, sondern sich auf die allgemeine Semantik jedes erstellten oder manipulierten Abschnitts konzentrieren kann, während die genauen Stil-Details dem Stylesheet überlassen werden. Es gibt jedoch Fälle, in denen das Abrufen oder Manipulieren der Regeln sinnvoll sein kann (ob für ganze Stylesheets oder einzelne Elemente), und das wird weiter unten im Detail beschrieben. Beachten Sie auch, dass, wie bei den DOM-Stilen einzelner Elemente, das Manipulieren von Stylesheets nicht bedeutet, physische Dokumente zu verändern, sondern lediglich die interne Darstellung des Dokuments.

Das grundlegende style-Objekt stellt die Schnittstellen Stylesheet und CSSStylesheet bereit. Diese Schnittstellen enthalten Mitglieder wie insertRule, selectorText und parentStyleSheet zum Zugriff und zur Manipulation der einzelnen Stilregeln, die ein CSS-Stylesheet bilden.

Um auf die style-Objekte aus dem document zuzugreifen, können Sie die Document.styleSheets Eigenschaft verwenden und auf die einzelnen Objekte per Index zugreifen (z.B., document.styleSheets[0] ist das erste Stylesheet, das für das Dokument definiert ist, etc.).

Eine Stylesheet-Regel mit CSSOM ändern

In diesem Beispiel wird der Hintergrund der Seite mit CSS auf red gesetzt. Das JavaScript greift dann mit dem CSSOM auf die Eigenschaft zu und ändert den Hintergrund zu cornflowerblue.

html

<p>The stylesheet declaration for the body is modified via JavaScript.</p>

css

body {
  background-color: red;
  font: 1.2em / 1.5 sans-serif;
  color: white;
  padding: 1em;
}

const stylesheet = document.styleSheets[1];
stylesheet.cssRules[0].style.backgroundColor = "cornflowerblue";

Die Liste der im DOM verfügbaren Eigenschaften aus der style Eigenschaft finden Sie auf der Seite DOM CSS Properties List.

Um Stile für ein Dokument mithilfe der CSS-Syntax zu ändern, kann man Regeln einfügen oder <style> Tags einfügen, deren innerHTML-Eigenschaft auf das gewünschte CSS gesetzt ist.

Den Stil eines Elements ändern

Die Eigenschaft style eines Elements (siehe auch den Abschnitt "DOM Style Object" unten) kann ebenfalls verwendet werden, um die Stile eines Elements zu erhalten und zu setzen. Diese Eigenschaft gibt jedoch nur die Stilattribute zurück, die inline gesetzt wurden (z.B. gibt element.style.color auf einem als <td style="background-color: lightblue"> definierten Element den String "" zurück, obwohl das Element möglicherweise eine color über ein Stylesheet deklariert hat).

Außerdem überschreiben Sie beim Setzen dieser Eigenschaft auf ein Element alle Stile, die an anderer Stelle für die spezielle Eigenschaft dieses Elements gesetzt wurden. Das Setzen der border-Eigenschaft überschreibt beispielsweise die Einstellungen, die an anderer Stelle für die border-Eigenschaft dieses Elements im Kopfbereich oder in externen Stylesheets gemacht wurden. Dies betrifft jedoch keine anderen Eigenschaftsdeklarationen für die Stile dieses Elements, wie z.B. Padding, Margin oder Font.

Um den Stil eines bestimmten Elements zu ändern, können Sie das folgende Beispiel für die(s) zu stylende(n) Element(e) anpassen.

html

<p id="p1">Click here to change background color.</p>
<button>Reset background color</button>

css

#p1 {
  border: solid blue 2px;
}

const p1 = document.getElementById("p1");
const button = document.querySelector("button");

p1.addEventListener("click", () => {
  p1.style.background = "green";
});
button.addEventListener("click", () => {
  p1.style.background = "white";
});

Die Methode getComputedStyle() auf dem Objekt document.defaultView gibt alle Stile zurück, die tatsächlich für ein Element berechnet wurden.

Verwendung der Methode setAttribute

Beachten Sie, dass Sie auch den Stil eines Elements ändern können, indem Sie eine Referenz darauf erhalten und dann seine Methode setAttribute verwenden, um die CSS-Eigenschaft und ihren Wert anzugeben.

const el = document.getElementById("some-element");
el.setAttribute("style", "background-color:darkblue;");

Seien Sie sich jedoch bewusst, dass setAttribute alle anderen style-Eigenschaften entfernt, die möglicherweise bereits im style-Objekt des Elements definiert wurden. Wenn das some-element oben ein Inline-style-Attribut von zum Beispiel style="font-size: 18px" hatte, würde dieser Wert durch die Verwendung von setAttribute entfernt werden.