CSSRuleList

Ein CSSRuleList repräsentiert eine geordnete Sammlung von schreibgeschützten CSSRule Objekten.

Obwohl das CSSRuleList Objekt schreibgeschützt ist und nicht direkt modifiziert werden kann, wird es als live Objekt betrachtet, da sich der Inhalt im Laufe der Zeit ändern kann.

Um die zugrundeliegenden Regeln zu bearbeiten, die von CSSRule Objekten zurückgegeben werden, verwenden Sie CSSStyleSheet.insertRule() und CSSStyleSheet.deleteRule(), die Methoden von CSSStyleSheet sind.

Diese Schnittstelle war ein Versuch, eine unveränderbare Liste zu erstellen und wird weiterhin unterstützt, um bestehenden Code, der sie verwendet, nicht zu brechen. Moderne APIs repräsentieren Listenstrukturen mit Typen auf Basis von JavaScript-Arrays, was viele Array-Methoden verfügbar macht und gleichzeitig zusätzliche Semantiken bei ihrer Verwendung auferlegt (wie z.B. die Elemente schreibgeschützt zu machen).

Diese historischen Gründe bedeuten nicht, dass Sie als Entwickler CSSRuleList vermeiden sollten. Sie erstellen CSSRuleList Objekte nicht selbst, sondern erhalten sie von APIs wie CSSStyleSheet.cssRules und CSSKeyframesRule.cssRules, und diese APIs sind nicht veraltet. Seien Sie jedoch vorsichtig mit den semantischen Unterschieden zu einem echten Array.

body {
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  margin: 2em;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
}

.container > * {
  background-color: #3740ff;
  color: #fff;
}

let myRules = document.styleSheets[0].cssRules;
console.log(myRules);
console.log(myRules.length);
console.log(myRules[0]);