CSSStyleDeclaration

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Das CSSStyleDeclaration -Interface repräsentiert ein Objekt, das einen CSS-Deklarationsblock darstellt, und gibt Stilinformationen sowie verschiedene stilbezogene Methoden und Eigenschaften frei.

Ein CSSStyleDeclaration-Objekt kann über drei verschiedene APIs zur Verfügung gestellt werden:

Über HTMLElement.style, das sich mit den Inline-Stilen eines einzelnen Elements befasst (z. B. <div style="…">).
Über die CSSStyleSheet-API. Zum Beispiel gibt document.styleSheets[0].cssRules[0].style ein CSSStyleDeclaration-Objekt für die erste CSS-Regel im ersten Stylesheet des Dokuments zurück.
Über Window.getComputedStyle(), das das CSSStyleDeclaration-Objekt als schreibgeschütztes Interface bereitstellt.

Attribute

CSSStyleDeclaration.cssText: Textuelle Darstellung des Deklarationsblocks, jedoch nur, wenn er über HTMLElement.style bereitgestellt wird. Das Setzen dieses Attributs ändert den Inline-Stil. Wenn Sie eine Textdarstellung eines berechneten Deklarationsblocks möchten, können Sie dies mit JSON.stringify() erhalten.
CSSStyleDeclaration.length Nur lesbar: Die Anzahl der Eigenschaften. Siehe die Methode item() unten.
CSSStyleDeclaration.parentRule Nur lesbar: Die enthaltene CSSRule.

CSS-Eigenschaften

CSSStyleDeclaration.cssFloat: Spezielles Alias für die float-CSS-Eigenschaft.
CSSStyleDeclaration benannte Eigenschaften: Durch Bindestrich getrennte und in Camel-Case umgewandelte Attribute für alle unterstützten CSS-Eigenschaften.

Instanzmethoden

CSSStyleDeclaration.getPropertyPriority(): Gibt die optionale Priorität "important" zurück.
CSSStyleDeclaration.getPropertyValue(): Gibt den Eigenschaftswert für einen gegebenen Eigenschaftsnamen zurück.
CSSStyleDeclaration.item(): Gibt einen CSS-Eigenschaftsnamen nach seinem Index zurück oder den leeren String, wenn der Index außerhalb des gültigen Bereichs liegt.
CSSStyleDeclaration.removeProperty(): Entfernt eine Eigenschaft aus dem CSS-Deklarationsblock.
CSSStyleDeclaration.setProperty(): Ändert eine bestehende CSS-Eigenschaft oder erstellt eine neue CSS-Eigenschaft im Deklarationsblock.
CSSStyleDeclaration.getPropertyCSSValue() Veraltet: Nur über getComputedStyle in Firefox unterstützt. Gibt den Eigenschaftswert als CSSPrimitiveValue oder null für abkürzende Eigenschaften zurück.

Beispiel

const styleObj = document.styleSheets[0].cssRules[0].style;
console.log(styleObj.cssText);

for (let i = styleObj.length; i--; ) {
  const nameString = styleObj[i];
  styleObj.removeProperty(nameString);
}

console.log(styleObj.cssText);

Spezifikationen

Specification
CSS Object Model (CSSOM) # the-cssstyledeclaration-interface

Browser-Kompatibilität

BCD tables only load in the browser