CSSStyleSheet.rules — Eigenschaft · JavaScript-Referenz

Signatur

CSSStyleSheet.rules

Beschreibung

Die Eigenschaft rules des Interfaces CSSStyleSheet gibt eine CSSRuleList mit allen Regeln des Stylesheets zurück. Diese Liste ist live: Fügt man Regeln hinzu oder entfernt welche, ändert sich die Liste sofort mit.

rules stammt ursprünglich aus dem Internet Explorer. Die Browser haben die Eigenschaft nur übernommen, damit alter Code weiterläuft. Die Spezifikation CSSOM beschreibt sie als veraltetes Alias für die standardisierte Eigenschaft cssRules. Beide liefern dieselben Regeln.

In neuem Code solltest du immer cssRules verwenden. rules brauchst du nur, wenn du alten Code liest oder pflegst, der noch mit den IE-Methoden addRule() und removeRule() arbeitet.

Auch hier gelten die Sicherheitsregeln des CSSOM: Bei Stylesheets von fremden Ursprüngen ohne passende CORS-Header löst schon der Lesezugriff einen SecurityError aus.

Rückgabewert

Typ

CSSRuleList

Beschreibung

Eine live aktualisierte, nur lesbare Liste von CSSRule-Objekten, zum Beispiel CSSStyleRule oder CSSMediaRule. Es ist dieselbe Liste wie bei cssRules.

Beispiele

Regeln eines Stylesheets auflisten (Legacy-Stil)

const style = document.createElement('style');
style.textContent = `
  body { margin: 0; }
  .btn { color: white; background: navy; }
`;
document.head.append(style);

const sheet = style.sheet;
// Veraltet: rules — besser: sheet.cssRules
for (const rule of sheet.rules) {
  console.log(rule.cssText);
}

body { margin: 0px; } .btn { color: white; background: navy; }

rules und cssRules sind gleichwertig

const sheet = new CSSStyleSheet();
sheet.replaceSync('h1 { font-size: 2rem; } p { line-height: 1.5; }');

console.log(sheet.rules.length);           // 2
console.log(sheet.cssRules.length);        // 2
console.log(sheet.rules[0] === sheet.cssRules[0]);

2 2 true

Live-Verhalten beim Einfügen von Regeln

const sheet = new CSSStyleSheet();
const list = sheet.rules; // Referenz einmal holen

console.log(list.length); // 0
sheet.insertRule('.hidden { display: none; }');
console.log(list.length); // 1 – die Liste ist live
console.log(list[0].selectorText);

0 1 .hidden

Alten Code sicher auf cssRules umstellen

// Hilfsfunktion: bevorzugt den Standard, fällt auf rules zurück
const getRules = (sheet) => {
  try {
    return sheet.cssRules ?? sheet.rules;
  } catch (err) {
    // Fremder Ursprung ohne CORS
    console.warn('Kein Zugriff auf', sheet.href, err.name);
    return [];
  }
};

for (const sheet of document.styleSheets) {
  console.log(sheet.href ?? 'inline', getRules(sheet).length);
}

inline 2

// Wichtig · Fallstricke

Veraltet: rules gibt es nur noch, damit alter Code weiterläuft. Nimm stattdessen cssRules. Die Eigenschaft wird zwar in Chrome, Edge, Firefox und Safari unterstützt, kann aber irgendwann entfernt werden.
Zugehörige Legacy-Methoden: addRule() und removeRule() sind ebenfalls veraltet. Ersetze sie durch insertRule() und deleteRule().
Stylesheets fremder Ursprünge: Stammt das Stylesheet von einem anderen Ursprung und fehlen CORS-Header (crossorigin-Attribut plus Access-Control-Allow-Origin), löst der Zugriff einen SecurityError (DOMException) aus. Deshalb gehört der Zugriff in einen try/catch-Block.
Live-Liste: Die Liste ändert sich mit, wenn Regeln hinzukommen oder wegfallen. Wenn du in einer Schleife über Indizes Regeln löschst, lauf rückwärts, sonst überspringst du Einträge.
Die CSSRuleList ist kein Array. Methoden wie map() brauchen vorher Array.from(). for…of funktioniert direkt.

Siehe auch

CSSStyleSheet.cssRules CSSStyleSheet.insertRule() CSSStyleSheet.deleteRule() CSSStyleSheet.addRule() CSSStyleSheet.removeRule() CSSRuleList CSSStyleSheet