CSSStyleRule.style — Eigenschaft · JavaScript-Referenz

Signatur

CSSStyleRule.style

Beschreibung

Die Eigenschaft style einer CSSStyleRule gibt Zugriff auf die Deklarationen innerhalb der geschweiften Klammern einer Regel, also z. B. auf color: red; margin: 0 in .btn { color: red; margin: 0 }. Das zurückgegebene Objekt ist vom Typ CSSStyleProperties (ältere Spezifikationen und Browser: CSSStyleDeclaration) und bietet dieselben Methoden wie element.style: getPropertyValue(), setProperty(), removeProperty(), getPropertyPriority() sowie cssText und Camel-Case-Eigenschaften wie backgroundColor.

Schreibgeschützt ist nur die Referenz selbst: Man kann rule.style kein neues Objekt zuweisen, das Objekt aber sehr wohl verändern. Änderungen wirken sich sofort auf alle Elemente aus, auf die der Selektor passt – im Gegensatz zu element.style, das nur ein einzelnes Element betrifft. Das eignet sich besonders für Theme-Umschaltungen, dynamische Design-Tokens oder Werkzeuge wie Style-Editoren.

In der Praxis erreicht man eine Regel über document.styleSheets[i].cssRules oder über ein selbst erzeugtes CSSStyleSheet (Constructable Stylesheets). Da cssRules auch andere Regeltypen enthält (@media, @font-face …), sollte man vorher mit instanceof CSSStyleRule prüfen.

Rückgabewert

Typ

CSSStyleProperties

Beschreibung

Live-Objekt mit den Deklarationen der Regel. Änderungen daran aktualisieren das Stylesheet und damit alle betroffenen Elemente sofort.

Beispiele

Deklarationen einer Regel auslesen

const sheet = new CSSStyleSheet();
sheet.replaceSync('.btn { color: white; background-color: rebeccapurple; padding: 8px 16px !important; }');
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

const rule = sheet.cssRules[0];
console.log(rule.selectorText);
console.log(rule.style.backgroundColor);
console.log(rule.style.getPropertyValue('padding'));
console.log(rule.style.getPropertyPriority('padding'));
console.log(rule.style.length);

.btn rebeccapurple 8px 16px important 6

Regel gezielt ändern – wirkt auf alle passenden Elemente

const findRule = (selector) => {
  for (const sheet of document.styleSheets) {
    let rules;
    try {
      rules = sheet.cssRules; // wirft bei fremden Stylesheets ohne CORS
    } catch {
      continue;
    }
    for (const rule of rules) {
      if (rule instanceof CSSStyleRule && rule.selectorText === selector) {
        return rule;
      }
    }
  }
  return null;
};

const cardRule = findRule('.card');
if (cardRule) {
  cardRule.style.setProperty('border-radius', '12px');
  cardRule.style.setProperty('box-shadow', '0 2px 8px rgb(0 0 0 / 0.2)', 'important');
  cardRule.style.removeProperty('border');
  console.log(cardRule.cssText);
}

.card { border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px !important; }

Theme per CSS-Custom-Properties umschalten

const theme = new CSSStyleSheet();
theme.replaceSync(':root { --bg: #ffffff; --fg: #222222; }');
document.adoptedStyleSheets = [...document.adoptedStyleSheets, theme];

const rootRule = theme.cssRules[0];

const setDarkMode = (dark) => {
  rootRule.style.setProperty('--bg', dark ? '#121212' : '#ffffff');
  rootRule.style.setProperty('--fg', dark ? '#eeeeee' : '#222222');
};

setDarkMode(true);
console.log(rootRule.style.getPropertyValue('--bg'));

#121212

Gesamten Regelkörper über cssText ersetzen

const sheet = new CSSStyleSheet();
sheet.replaceSync('h1 { color: red; }');
const rule = sheet.cssRules[0];

rule.style.cssText = 'color: navy; font-size: 2rem;';
console.log(rule.style.cssText);

// Nicht erlaubt: rule.style = ... (Referenz ist schreibgeschützt)

color: navy; font-size: 2rem;

// Wichtig · Fallstricke

Schreibgeschützt ≠ unveränderlich: rule.style = {...} hat keine Wirkung (im Strict-Mode ggf. ignoriert bzw. als Weiterleitung an cssText behandelt – nicht darauf verlassen). Ändern Sie stattdessen setProperty() oder cssText.
Kurzschreibweisen werden aufgelöst: padding: 8px erscheint als vier Langform-Eigenschaften; length und die Iteration liefern daher oft mehr Einträge als im Quelltext stehen. Farben werden teils normalisiert (z. B. rgba(...)).
Ungültige Werte werden bei setProperty() stillschweigend verworfen – es gibt keinen Fehler.
Cross-Origin-Stylesheets: Zugriff auf cssRules von Stylesheets anderer Herkunft ohne CORS-Header wirft einen SecurityError; daher try/catch verwenden.
Verschachtelung (CSS Nesting): Deklarationen nach verschachtelten Regeln landen in CSSNestedDeclarations-Regeln, nicht in style der Elternregel.
Kompatibilität: Die Eigenschaft ist in allen Browsern verfügbar. Der Typname CSSStyleProperties ist neu; ältere Browser liefern ein CSSStyleDeclaration mit identischer Schnittstelle. Prüfungen per instanceof CSSStyleProperties daher vermeiden.
Performance: Eine Regeländerung ist meist effizienter als das Setzen von element.style auf vielen Elementen, löst aber eine Neuberechnung der Stile für alle betroffenen Elemente aus.

Siehe auch

CSSStyleRule.styleMap CSSStyleRule.selectorText CSSPageRule.style CSSFontFaceRule.style CSSKeyframeRule.style