CSSRuleList

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

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.

In diesem Artikel

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

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

CSSRule

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

CSS Object Model (CSSOM)
CSSRuleList
Instanzeigenschaften
1. length
Instanzmethoden
1. item()
Verwandte Seiten für CSSOM
Anleitungen
1. CSS Declaration
2. CSS-Deklarationsblock
3. Bestimmung der Dimensionen von Elementen
4. Verwaltung der Bildschirmorientierung
5. Verwenden dynamischer Styling-Informationen
6. CSS-Wertserialisierung