CSSStyleSheet.cssRules — Eigenschaft · JavaScript-Referenz

Signatur

CSSStyleSheet.cssRules

Beschreibung

cssRules liefert eine dynamische CSSRuleList: Die Liste zeigt immer den aktuellen Stand des Stylesheets. Fügt man mit insertRule() eine Regel hinzu oder entfernt sie mit deleteRule(), ändert sich die bestehende Liste sofort, ohne dass cssRules erneut abgefragt werden muss.

Jeder Eintrag ist ein Objekt einer Unterklasse von CSSRule, z. B. CSSStyleRule für normale Selektorregeln, CSSMediaRule für @media-Blöcke, CSSKeyframesRule für @keyframes oder CSSImportRule für @import. Verschachtelte Gruppenregeln wie @media besitzen selbst wieder eine eigene cssRules-Eigenschaft.

Typische Einsatzzwecke sind das Auslesen und gezielte Ändern von Regeln zur Laufzeit (z. B. Theme-Umschaltung), Analyse-Werkzeuge, die ungenutzte Selektoren finden, sowie die Arbeit mit konstruierbaren Stylesheets (new CSSStyleSheet()) in Web Components.

Die Eigenschaft ist schreibgeschützt: Man kann ihr keine neue Liste zuweisen. Änderungen erfolgen ausschließlich über insertRule(), deleteRule(), replace()/replaceSync() oder über die Eigenschaften der einzelnen Regelobjekte.

Rückgabewert

Typ

CSSRuleList

Beschreibung

Eine dynamische, array-ähnliche Liste von CSSRule-Objekten mit length und item(index). Sie ist iterierbar (for...of), aber kein echtes Array.

Beispiele

Alle Regeln eines Stylesheets auflisten

// Erstes Stylesheet des Dokuments (z. B. ein <style>-Element)
const sheet = document.styleSheets[0];

for (const rule of sheet.cssRules) {
  console.log(rule.constructor.name, '→', rule.cssText);
}

console.log(`Anzahl Regeln: ${sheet.cssRules.length}`);

CSSStyleRule → body { margin: 0px; } CSSMediaRule → @media (max-width: 600px) { ... } Anzahl Regeln: 2

Dynamische Liste mit insertRule() beobachten

const sheet = new CSSStyleSheet();
sheet.replaceSync('h1 { color: navy; }');
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

const rules = sheet.cssRules; // Referenz einmal holen
console.log(rules.length);

sheet.insertRule('p { line-height: 1.6; }', rules.length);
console.log(rules.length); // gleiche Liste, aktualisiert
console.log(rules[1].selectorText);

1 2 p

Farbe einer bestimmten Regel zur Laufzeit ändern

const findRule = (sheet, selector) =>
  [...sheet.cssRules].find(
    (r) => r instanceof CSSStyleRule && r.selectorText === selector
  );

const sheet = document.styleSheets[0];
const buttonRule = findRule(sheet, '.button');

if (buttonRule) {
  buttonRule.style.backgroundColor = 'rebeccapurple';
  console.log(buttonRule.cssText);
}

.button { background-color: rebeccapurple; }

Verschachtelte @media-Regeln rekursiv durchsuchen

const collectSelectors = (rules, result = []) => {
  for (const rule of rules) {
    if (rule instanceof CSSStyleRule) result.push(rule.selectorText);
    if ('cssRules' in rule) collectSelectors(rule.cssRules, result);
  }
  return result;
};

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  .card { padding: 1rem; }
  @media (min-width: 800px) { .card { padding: 2rem; } .grid { display: grid; } }
`);

console.log(collectSelectors(sheet.cssRules));

[".card", ".card", ".grid"]

// Wichtig · Fallstricke

Same-Origin-Policy: Bei Stylesheets von einer fremden Herkunft (z. B. CDN via <link>) wirft der Zugriff auf cssRules einen SecurityError. Abhilfe: crossorigin="anonymous" am <link> und passende CORS-Header auf dem Server. Zugriffe am besten in try...catch kapseln.
Noch nicht geladen: Solange ein externes Stylesheet nicht fertig geladen ist, kann der Zugriff fehlschlagen (InvalidAccessError) oder eine leere Liste liefern. Auf das load-Event des <link> warten.
Dynamische Liste: Wer beim Iterieren Regeln löscht, verschiebt die Indizes. Rückwärts iterieren oder vorher mit [...sheet.cssRules] eine statische Kopie erzeugen.
Kein Array: CSSRuleList hat kein map()/filter(); Array.from() oder Spread-Syntax verwenden.
Der Browser normalisiert cssText (z. B. 0 → 0px, Farbformate); ungültige Deklarationen fehlen ganz.
Die veraltete Alias-Eigenschaft rules (aus altem IE) sollte nicht mehr verwendet werden.

Siehe auch

CSSStyleSheet.rules CSSStyleSheet.ownerRule StyleSheet.disabled CSSStyleRule.style StyleSheet.href