CSSRuleList
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 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.lengthSchreibgeschü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
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
Loading…