CSSRuleList

Baseline Widely available

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

Ein CSSRuleList stellt eine geordnete Sammlung von schreibgeschützten CSSRule-Objekten dar.

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 zugrunde liegenden Regeln, die von CSSRule-Objekten zurückgegeben werden, zu bearbeiten, verwenden Sie CSSStyleSheet.insertRule() und CSSStyleSheet.deleteRule(), welche Methoden von CSSStyleSheet sind.

Dieses Interface war ein Versuch, eine unveränderliche Liste zu erstellen und wird nur weiterhin unterstützt, um den Code nicht zu brechen, der es bereits verwendet. Moderne APIs repräsentieren Listenstrukturen mithilfe von Typen, die auf JavaScript-Arrays basieren, wodurch viele Array-Methoden verfügbar sind und gleichzeitig zusätzliche Semantiken für ihre Verwendung auferlegt werden (wie z. B. das Festlegen ihrer Elemente als schreibgeschützt).

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 hinsichtlich der semantischen Unterschiede zu einem echten Array.

Instanz-Eigenschaften

CSSRuleList.length Schreibgeschützt: Gibt einen Integer zurück, der die Anzahl der CSSRule-Objekte in der Sammlung darstellt.

Instanz-Methoden

CSSRuleList.item(): Holt 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 die Konsole gedruckt wird.

Die Anzahl der Regeln in der Liste wird mit CSSRuleList.length in die Konsole gedruckt. Die erste CSSRule kann mithilfe von 0 als Parameter für CSSRuleList.item zurückgegeben werden. In diesem Beispiel wird dies die Regeln 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: white;
}

JavaScript

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

Siehe auch

CSSRule