StylePropertyMap.delete() — Methode · JavaScript-Referenz

Signatur

StylePropertyMap.prototype.delete(property)

Beschreibung

Die Methode delete() gehört zur CSS Typed Object Model API (CSS Typed OM). Sie entfernt eine CSS-Deklaration aus einer beschreibbaren StylePropertyMap. In der Praxis ist das meist element.attributeStyleMap, also der Inline-Stil (style-Attribut) eines Elements, oder CSSStyleRule.styleMap für eine Regel in einem Stylesheet.

Sie entspricht dem klassischen element.style.removeProperty('eigenschaft'), passt aber in die typisierte API mit set(), get(), append() und clear(). Nach dem Entfernen gilt für das Element wieder der Wert aus der Kaskade, also aus Stylesheets, Vererbung oder dem Anfangswert.

Der Eigenschaftsname kann eine normale CSS-Eigenschaft in Bindestrich-Schreibweise sein ('background-color') oder eine benutzerdefinierte Eigenschaft ('--akzent'). Existiert die Deklaration nicht, passiert nichts und es wird kein Fehler geworfen.

Parameter

Name	Typ	Default	Beschreibung
$property Pflicht	string		Name der zu entfernenden CSS-Eigenschaft, z. B. `'padding-top'` oder `'--theme-color'`. Bei Kurzschreibweisen wie `'margin'` werden auch die zugehörigen Einzeleigenschaften entfernt.

Rückgabewert

Typ

undefined

Beschreibung

Kein Rückgabewert. Die Map wird direkt verändert.

Beispiele

Inline-Stil eines Elements entfernen

const box = document.querySelector('.box');

// Inline-Stil typisiert setzen
box.attributeStyleMap.set('opacity', 0.5);
box.attributeStyleMap.set('padding', CSS.px(20));
console.log(box.attributeStyleMap.has('opacity'));

// Deklaration wieder entfernen
box.attributeStyleMap.delete('opacity');
console.log(box.attributeStyleMap.has('opacity'));
console.log(box.getAttribute('style'));

true false padding: 20px;

Hervorhebung per Custom Property ein- und ausschalten

const karte = document.querySelector('.karte');

const hervorheben = (aktiv) => {
  if (aktiv) {
    karte.attributeStyleMap.set('--akzent', 'tomato');
  } else {
    // Wert aus dem Stylesheet gilt wieder
    karte.attributeStyleMap.delete('--akzent');
  }
};

karte.addEventListener('mouseenter', () => hervorheben(true));
karte.addEventListener('mouseleave', () => hervorheben(false));

Deklaration aus einer Stylesheet-Regel löschen – mit Fallback

const regel = [...document.styleSheets[0].cssRules]
  .find((r) => r.selectorText === '.hinweis');

if (regel?.styleMap) {
  regel.styleMap.delete('border');
} else if (regel) {
  // Fallback für Browser ohne CSS Typed OM (z. B. Firefox)
  regel.style.removeProperty('border');
}

console.log(regel?.style.border === '');

true

// Wichtig · Fallstricke

Browser-Unterstützung: CSS Typed OM gibt es in Chromium-Browsern ab Version 66 und in Safari ab 16.4. Firefox unterstützt die API bisher nicht. Prüfe die Verfügbarkeit, z. B. mit 'attributeStyleMap' in Element.prototype, und greife sonst auf style.removeProperty() zurück.
Nur beschreibbare Maps: element.computedStyleMap() liefert eine schreibgeschützte StylePropertyMapReadOnly, die kein delete() hat. Berechnete Stile lassen sich so nicht entfernen.
Nur die eigene Deklaration: delete() entfernt nur den Eintrag in dieser Map. Werte aus anderen Regeln oder Stylesheets bleiben wirksam.
Ein ungültiger Eigenschaftsname (weder bekannte CSS-Eigenschaft noch ---Custom-Property) löst einen TypeError aus.
Eigenschaftsnamen in Bindestrich-Schreibweise angeben ('font-size'), nicht in camelCase.

Siehe auch

StylePropertyMapReadOnly.forEach() StylePropertyMap.clear() StylePropertyMap.set() StylePropertyMap.append() StylePropertyMapReadOnly.get()