CSSStyleSheet: addRule() Methode

Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, kann sie bereits aus den relevanten Webstandards entfernt worden sein, befindet sich im Prozess der Entfernung oder wird nur aus Kompatibilitätsgründen beibehalten. Vermeiden Sie die Verwendung und aktualisieren Sie gegebenenfalls bestehenden Code; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu treffen. Beachten Sie, dass diese Funktion jederzeit nicht mehr funktionieren kann.

Die veraltete Schnittstelle CSSStyleSheet verwendet die addRule() Legacy-Methode, um eine neue Regel zum Stylesheet hinzuzufügen. Sie sollten diese Methode vermeiden und stattdessen die standardmäßigere insertRule() Methode verwenden.

Syntax

js
addRule(selector, styleBlock, index)

Parameter

selector

Ein Zeichenfolgenwert, der den Selektoranteil der CSS-Regel angibt. Der Standardwert ist die Zeichenfolge undefined.

styleBlock

Eine Zeichenfolge, die den Stilblock angibt, der auf Elemente angewendet werden soll, die dem selector entsprechen. Der Standardwert ist die Zeichenfolge undefined.

index Optional

Ein optionaler Index in der CSSRuleList des Stylesheets, an dem die neue Regel eingefügt werden soll. Wird index nicht angegeben, wird der nächste Index nach dem letzten Element in der Liste verwendet (also der Wert von cssStyleSheet.cssRules.length).

Rückgabewert

Gibt immer -1 zurück.

Beachten Sie, dass es aufgrund von etwas exotischen Regeln darüber, wo Sie legal Regeln einfügen können, möglich ist, dass eine Ausnahme ausgelöst wird. Weitere Informationen finden Sie unter insertRule().

Verwendungshinweise

Diese Methode wird von Browsern implementiert, indem ein String unter Verwendung des Template-Literals `${selector}{${styleBlock}}` konstruiert und dann in die standardmäßige insertRule() Methode übergeben wird.

Daher kann der bestehende Code wie folgt umgeschrieben werden:

js
cssStyleSheet.addRule(selector, styles, 0);

Sie können dies umschreiben und die standardmäßigere insertRule() Methode wie folgt verwenden:

js
cssStyleSheet.insertRule(`${selector} {${styles}}`, 0);

Spezifikationen

Specification
CSS Object Model (CSSOM)
# dom-cssstylesheet-addrule

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch