CSSStyleSheet.removeRule() — Methode · JavaScript-Referenz

Signatur

CSSStyleSheet.prototype.removeRule(index)

Beschreibung

CSSStyleSheet.removeRule() entfernt die CSS-Regel, die im Stylesheet an der Position index steht. Die Methode stammt aus dem Internet Explorer und ist inzwischen im CSSOM-Standard als veraltete Alias-Methode beschrieben. Sie macht dasselbe wie CSSStyleSheet.deleteRule(), mit einem Unterschied: Der Index ist optional und steht standardmäßig auf 0.

Man braucht die Methode im Grunde nur, wenn man alten Code pflegt, der noch addRule()/removeRule() verwendet. In neuem Code sollte man immer die Standard-Methoden insertRule() und deleteRule() nehmen. Sie verhalten sich eindeutig und sind überall dokumentiert.

Nach dem Entfernen verschieben sich alle folgenden Regeln in der Liste cssRules um eine Position nach vorn. Wer in einer Schleife mehrere Regeln löscht, sollte deshalb von hinten nach vorn vorgehen.

Parameter

Name	Typ	Default	Beschreibung
$index	number	0	Position der Regel in `sheet.cssRules`, die entfernt werden soll (beginnt bei 0). Fehlt der Wert, wird die erste Regel entfernt.

Rückgabewert

Typ

void

Beschreibung

Gibt undefined zurück. Liegt index außerhalb des gültigen Bereichs, wird eine DOMException vom Typ IndexSizeError ausgelöst.

Beispiele

Erste Regel eines Stylesheets entfernen

const style = document.createElement('style');
style.textContent = `
  body { margin: 0; }
  h1 { color: tomato; }
`;
document.head.append(style);

const sheet = style.sheet;
console.log(sheet.cssRules.length);

// Ohne Argument wird Index 0 verwendet
sheet.removeRule();
console.log(sheet.cssRules.length, sheet.cssRules[0].cssText);

2 1 h1 { color: tomato; }

Bestimmte Regel über den Selektor finden und entfernen

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  .btn { padding: 4px; }
  .btn--danger { background: red; }
  .card { border: 1px solid #ccc; }
`);
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

const index = [...sheet.cssRules].findIndex(
  (rule) => rule.selectorText === '.btn--danger'
);

if (index !== -1) {
  sheet.removeRule(index); // besser: sheet.deleteRule(index)
}

console.log([...sheet.cssRules].map((r) => r.selectorText));

[".btn", ".card"]

Mehrere Regeln rückwärts löschen

const sheet = new CSSStyleSheet();
sheet.replaceSync('.a{} .tmp-1{} .b{} .tmp-2{}');

// Rückwärts, damit sich die Indizes nicht verschieben
for (let i = sheet.cssRules.length - 1; i >= 0; i--) {
  if (sheet.cssRules[i].selectorText.startsWith('.tmp')) {
    sheet.removeRule(i);
  }
}

console.log(sheet.cssRules.length);

2

Fehlerbehandlung bei ungültigem Index

const sheet = new CSSStyleSheet();
sheet.replaceSync('p { color: blue; }');

try {
  sheet.removeRule(5);
} catch (err) {
  console.log(err.name);
}

IndexSizeError

// Wichtig · Fallstricke

Veraltet: Die Methode gibt es nur noch aus Kompatibilitätsgründen. Nimm stattdessen deleteRule(index), dort ist der Index Pflicht.
Standardwert: Ruft man removeRule() ohne Argument auf, wird still die erste Regel gelöscht. Das führt leicht zu Fehlern, die man lange sucht.
Indizes verschieben sich: Nach jedem Löschen rücken die folgenden Regeln nach. Beim Löschen in einer Schleife deshalb rückwärts zählen.
CORS/SecurityError: Bei Stylesheets von fremden Ursprüngen, die ohne CORS-Freigabe geladen wurden, lässt sich nicht auf cssRules zugreifen, und removeRule() löst einen SecurityError aus.
Bei Stylesheets aus @import-Regeln oder bei Konstrukt-Stylesheets, während replace() noch läuft, kann ein NotAllowedError auftreten.
Browser-Unterstützung: Chrome, Edge, Firefox und Safari bieten die Methode als Alias an, sie ist aber nicht für die Zukunft garantiert.

Siehe auch

CSSStyleSheet.deleteRule() CSSStyleSheet.insertRule() CSSStyleSheet.addRule() CSSStyleSheet.cssRules CSSStyleSheet.replaceSync() CSSStyleSheet CSSPrimitiveValue.getRGBColorValue()