CSSRuleList

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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.

Instanz-Eigenschaften

CSSRuleList.length Schreibgeschützt

Gibt eine Ganzzahl zurück, die die Anzahl der CSSRule Objekte in der Sammlung darstellt.

Instanz-Methoden

CSSRuleList.item()

Erhält eine einzelne CSSRule.

Beispiele

Im folgenden Beispiel gibt es ein Stylesheet mit drei Regeln. Die Verwendung von CSSStyleSheet.cssRules gibt eine CSSRuleList zurück, die in der Konsole ausgegeben wird.

Die Anzahl der Regeln in der Liste wird mit CSSRuleList.length in der Konsole ausgegeben. Die erste CSSRule kann durch die Verwendung von 0 als Parameter für CSSRuleList.item zurückgegeben werden; in dem Beispiel wird dies die Regelmenge für den body-Selektor zurückgeben.

CSS

css
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;
}

JavaScript

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

Spezifikationen

Specification
CSS Object Model (CSSOM)
# the-cssrulelist-interface

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
CSSRuleList
item
length

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch