Signatur
Beschreibung
Die schreibgeschützte Eigenschaft length des Interfaces CSSRuleList liefert die Anzahl der CSS-Regeln in der Liste. Eine CSSRuleList bekommt man typischerweise über CSSStyleSheet.cssRules oder über die cssRules-Eigenschaft einer Gruppierungsregel wie CSSMediaRule, CSSSupportsRule oder CSSKeyframesRule.
Gebraucht wird length vor allem in drei Fällen: um mit einer klassischen for-Schleife über alle Regeln zu laufen, um zu prüfen, ob ein Stylesheet überhaupt Regeln enthält, und um neue Regeln mit CSSStyleSheet.insertRule(rule, sheet.cssRules.length) am Ende eines Stylesheets einzufügen.
Die Liste ist live: Wenn Regeln über insertRule() oder deleteRule() hinzukommen oder wegfallen, ändert sich length sofort mit. Gezählt werden nur die Regeln der obersten Ebene. Regeln innerhalb von @media-Blöcken zählen also jeweils als eine einzige Regel. Wer tiefer hinein will, muss die Liste rekursiv durchlaufen.
Rückgabewert
CSSRule-Objekte in der Liste. Bei einer leeren Liste ist der Wert 0.Beispiele
Anzahl der Regeln aller Stylesheets ausgeben
// Zählt die Regeln jedes Stylesheets, das von derselben Herkunft stammt
for (const sheet of document.styleSheets) {
try {
console.log(`${sheet.href ?? 'inline'}: ${sheet.cssRules.length} Regeln`);
} catch (err) {
// Stylesheets von fremden Herkünften sind ohne CORS gesperrt
console.warn('Kein Zugriff auf', sheet.href);
}
}Regel ans Ende eines Stylesheets anfügen
const style = document.createElement('style');
document.head.append(style);
const sheet = style.sheet;
console.log(sheet.cssRules.length); // 0
// length als Index sorgt dafür, dass die Regel ans Ende kommt
sheet.insertRule('body { margin: 0; }', sheet.cssRules.length);
sheet.insertRule('.hinweis { color: crimson; }', sheet.cssRules.length);
console.log(sheet.cssRules.length); // 2 – die Liste ist liveRegeln inklusive verschachtelter @media-Blöcke rekursiv zählen
const countRules = (ruleList) => {
let total = 0;
for (let i = 0; i < ruleList.length; i++) {
const rule = ruleList[i];
total++;
// Gruppierungsregeln (@media, @supports …) besitzen eigene cssRules
if (rule.cssRules) total += countRules(rule.cssRules);
}
return total;
};
const style = document.createElement('style');
style.textContent = `
p { color: gray; }
@media (min-width: 600px) {
p { color: black; }
h1 { font-size: 2rem; }
}
`;
document.head.append(style);
console.log(style.sheet.cssRules.length); // oberste Ebene
console.log(countRules(style.sheet.cssRules)); // inklusive Verschachtelung// Wichtig · Fallstricke
- Nur lesbar: Wenn man
lengthetwas zuweist, passiert nichts. Im Strict Mode wird einTypeErrorgeworfen. Um die Liste zu kürzen, nimmt manCSSStyleSheet.deleteRule(). - Live-Liste: Wer beim Schleifendurchlauf Regeln löscht, verschiebt dabei die Indizes. Deshalb rückwärts laufen:
for (let i = list.length - 1; i >= 0; i--). - Stylesheets von fremden Herkünften: Schon der Zugriff auf
cssRules(und damit auflength) wirft einenSecurityError, wenn das Stylesheet von einer anderen Herkunft ohne passende CORS-Header (crossorigin-Attribut +Access-Control-Allow-Origin) geladen wurde. - Kein echtes Array:
CSSRuleListhat keine Methoden wiemap()oderfilter(). MitArray.from(list)lässt sie sich umwandeln.for…offunktioniert in modernen Browsern direkt. - Die Eigenschaft wird von allen gängigen Browsern seit Langem unterstützt.