CSSStyleSheet: insertRule() Methode

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.

Die CSSStyleSheet.insertRule()-Methode fügt eine neue CSS-Regel in das aktuelle Stylesheet ein.

Hinweis: Obwohl insertRule() ausschließlich eine Methode von CSSStyleSheet ist, fügt sie die Regel tatsächlich in [CSSStyleSheet](/de/docs/Web/API/CSSStyleSheet).cssRules ein — ihre interne CSSRuleList.

In diesem Artikel

Syntax

js
insertRule(rule)
insertRule(rule, index)

Parameter

rule

Ein String, der die einzufügende Regel enthält. Was die eingefügte Regel enthalten muss, hängt von ihrem Typ ab:

Für Regelsätze sowohl ein Selector als auch eine Stil-Deklaration.
Für At-Regeln sowohl ein At-Identifikator als auch der Regelinhalt.

index Optional

Eine positive Ganzzahl, die kleiner oder gleich stylesheet.cssRules.length ist und die Position der neu eingefügten Regel in [CSSStyleSheet](/de/docs/Web/API/CSSStyleSheet).cssRules darstellt. Der Standardwert ist 0. (In älteren Implementierungen war dies erforderlich. Siehe Browser-Kompatibilität für Details.)

Rückgabewert

Der Index der neu eingefügten Regel innerhalb der Regel-Liste des Stylesheets.

Ausnahmen

IndexSizeError DOMException

Wird ausgelöst, wenn index > [CSSRuleList](/de/docs/Web/API/CSSRuleList).length.

HierarchyRequestError DOMException

Wird ausgelöst, wenn rule an der angegebenen Position nicht eingefügt werden kann, aufgrund einer CSS-Einschränkung; zum Beispiel: der Versuch, eine @import At-Regel nach einer Stilregel einzufügen.

SyntaxError DOMException

Wird ausgelöst, wenn im rule Parameter mehr als eine Regel angegeben wird.

InvalidStateError DOMException

Wird ausgelöst, wenn rule ein @namespace ist und die rule-list At-Regeln enthält, die nicht @import und @namespace-At-Regeln sind.

js
/**
 * Add a stylesheet rule to the document (it may be better practice
 * to dynamically change classes, so style information can be kept in
 * genuine stylesheets and avoid adding extra elements to the DOM).
 * Note that an array is needed for declarations and rules since ECMAScript does
 * not guarantee a predictable object iteration order, and since CSS is
 * order-dependent.
 * @param {Array} rules Accepts an array of JSON-encoded declarations
 * @example
addStylesheetRules([
  ['h2', // Also accepts a second argument as an array of arrays instead
    ['color', 'red'],
    ['background-color', 'green', true] // 'true' for !important rules
  ],
  ['.myClass',
    ['background-color', 'yellow']
  ]
]);
*/
function addStylesheetRules(rules) {
  const styleEl = document.createElement("style");

  // Append <style> element to <head>
  document.head.appendChild(styleEl);

  // Grab style element's sheet
  const styleSheet = styleEl.sheet;

  for (let rule of rules) {
    let i = 1,
      selector = rule[0],
      propStr = "";
    // If the second argument of a rule is an array of arrays, correct our variables.
    if (Array.isArray(rule[1][0])) {
      rule = rule[1];
      i = 0;
    }

    for (; i < rule.length; i++) {
      const prop = rule[i];
      propStr += `${prop[0]}: ${prop[1]}${prop[2] ? " !important" : ""};\n`;
    }

    // Insert CSS Rule
    styleSheet.insertRule(
      `${selector}{${propStr}}`,
      styleSheet.cssRules.length,
    );
  }
}

CSSStyleSheet.deleteRule
Konstruktable Stylesheets (web.dev)

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)
CSSStyleSheet
Konstruktor
1. CSSStyleSheet()
Instanzeigenschaften
Instanzmethoden
Vererbung
1. StyleSheet
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

CSSStyleSheet: insertRule() Methode

In diesem Artikel

Syntax

Parameter

Rückgabewert

Ausnahmen

Beispiele

Einfügen einer neuen Regel

Funktion zum Hinzufügen einer Stylesheet-Regel

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN