CSS-Deklarationsblock

Ein CSS-Deklarationsblock ist eine geordnete Sammlung von CSS-Eigenschaften und -Werten. Im DOM wird er als CSSStyleDeclaration dargestellt.

Jedes Paar aus Eigenschaft und Wert wird als CSS-Deklaration bezeichnet. Der CSS-Deklarationsblock hat die folgenden zugehörigen Eigenschaften:

berechnete Flagge

Wird gesetzt, wenn das CSSStyleDeclaration-Objekt einen berechneten anstelle eines angegebenen Stils darstellt. Standardmäßig nicht gesetzt.

Deklarationen

Die CSS-Deklarationen, die mit diesem Objekt verbunden sind.

übergeordnete CSS-Regel

Die CSSRule, mit der der CSS-Deklarationsblock verknüpft ist, andernfalls null.

Eigentümerknoten

Das element, mit dem der CSS-Deklarationsblock verknüpft ist, andernfalls null.

Aktualisierungsflagge

Wird gesetzt, wenn der CSS-Deklarationsblock das style-Attribut des Eigentümerknotens aktualisiert.

Wenn eine CSSStyleDeclaration von einer Schnittstelle des CSS Object Model (CSSOM) zurückgegeben wird, werden diese Eigenschaften gemäß der Spezifikation auf die entsprechenden Werte gesetzt.

Einfaches Beispiel

Das folgende Beispiel zeigt eine CSS-Regel mit einem Deklarationsblock für das h1-Element. Der CSS-Deklarationsblock sind die Zeilen zwischen den geschweiften Klammern.

css
h1 {
  margin: 0 auto;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-style: italic;
  color: rebeccapurple;
}

Wir können eine CSSStyleDeclaration zurückgeben, die diesen CSS-Deklarationsblock darstellt, indem wir CSSStyleRule.style verwenden.

js
let myRules = document.styleSheets[0].cssRules;
let rule = myRules[0]; // a CSSStyleRule
console.log(rule.style); // a CSSStyleDeclaration object

Spezifikationen

Specification
CSS Object Model (CSSOM)
# css-declaration-blocks