CSSStyleDeclaration.removeProperty() — Methode · JavaScript-Referenz

Signatur

CSSStyleDeclaration.prototype.removeProperty(property)

Beschreibung

removeProperty() löscht eine einzelne Deklaration aus einem CSSStyleDeclaration-Objekt, typischerweise aus dem Inline-Stil eines Elements (element.style) oder aus einer Regel eines Stylesheets (CSSStyleRule.style). Die Methode gibt den Wert zurück, den die Eigenschaft vor dem Entfernen hatte. So kann man ihn z. B. zwischenspeichern und später wiederherstellen.

Der Eigenschaftsname wird in der CSS-Schreibweise (kebab-case) übergeben, also "background-color" und nicht "backgroundColor". Auch benutzerdefinierte Eigenschaften (--meine-farbe) lassen sich so entfernen. Das geht mit der Punkt-Schreibweise gar nicht.

Wenn Sie eine Kurzschreibweise wie margin oder border übergeben, werden alle zugehörigen Einzeleigenschaften entfernt (z. B. margin-top, margin-right …). Nach dem Entfernen eines Inline-Stils gilt wieder der Wert, der sich aus den Stylesheets und der Kaskade ergibt.

Typische Einsatzfälle: temporäre Inline-Stile nach einer Animation oder einem Drag-Vorgang zurücksetzen, per JavaScript gesetzte CSS-Variablen entfernen oder Regeln in dynamisch erzeugten Stylesheets anpassen.

Parameter

Name	Typ	Default	Beschreibung
$property Pflicht	string		Name der zu entfernenden CSS-Eigenschaft in CSS-Schreibweise, z. B. `"font-size"`, `"margin"` (Kurzschreibweise) oder `"--akzent"` (benutzerdefinierte Eigenschaft).

Rückgabewert

Typ

string

Beschreibung

Der bisherige Wert der Eigenschaft. Wenn sie nicht gesetzt war, ist das Ergebnis ein leerer String "". Die Methode wirft in diesem Fall keinen Fehler.

Beispiele

Inline-Stil eines Elements entfernen

const box = document.createElement('div');
box.style.backgroundColor = 'tomato';
box.style.padding = '1rem';

const alterWert = box.style.removeProperty('background-color');
console.log(alterWert);
console.log(box.getAttribute('style'));

tomato padding: 1rem;

CSS-Variable zurücksetzen (Theme-Umschaltung)

const root = document.documentElement;

// Benutzerdefinierte Farbe setzen
root.style.setProperty('--akzent', '#0a84ff');
console.log(root.style.getPropertyValue('--akzent'));

// Zurück zum Standardwert aus dem Stylesheet
root.style.removeProperty('--akzent');
console.log(JSON.stringify(root.style.getPropertyValue('--akzent')));

#0a84ff ""

Kurzschreibweise entfernt alle Einzeleigenschaften

const el = document.createElement('p');
el.style.margin = '10px 20px';
console.log(el.style.marginLeft);

el.style.removeProperty('margin');
console.log(JSON.stringify(el.style.marginLeft), el.style.length);

20px "" 0

Regel in einem dynamischen Stylesheet bearbeiten

const sheet = new CSSStyleSheet();
sheet.replaceSync('.karte { color: navy; border: 1px solid gray; }');
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

const regel = sheet.cssRules[0];
regel.style.removeProperty('border');
console.log(regel.cssText);

.karte { color: navy; }

// Wichtig · Fallstricke

kebab-case verwenden: removeProperty('backgroundColor') bewirkt nichts und gibt "" zurück. Richtig ist 'background-color'. Bei benutzerdefinierten Eigenschaften wird die Groß-/Kleinschreibung unterschieden.
Nur eigene Deklarationen: Über element.style entfernen Sie nur Inline-Stile. Werte aus Stylesheets bleiben erhalten. getComputedStyle() liefert ein schreibgeschütztes Objekt. Ein Aufruf von removeProperty() darauf wirft einen NoModificationAllowedError.
Alternative: el.style.color = '' wirkt ähnlich, gibt aber den alten Wert nicht zurück und funktioniert nicht mit CSS-Variablen.
Deklarationen mit !important werden ebenfalls entfernt. Die Priorität lässt sich vorher mit getPropertyPriority() auslesen.
Kompatibilität: Die Methode wird von allen modernen Browsern seit Langem unterstützt. adoptedStyleSheets (siehe letztes Beispiel) ist neuer und wird erst von aktuellen Browsern unterstützt.

Siehe auch

CSSStyleDeclaration CSSStyleDeclaration.setProperty() CSSStyleDeclaration.getPropertyValue() CSSStyleDeclaration.getPropertyPriority() HTMLElement.style Window.getComputedStyle() CSSStyleDeclaration.item()