StylePropertyMap.clear() — Methode · JavaScript-Referenz

Signatur

StylePropertyMap.prototype.clear()

Beschreibung

Die Methode clear() gehört zur Schnittstelle StylePropertyMap aus dem CSS Typed Object Model (Houdini). Sie löscht alle Deklarationen in der Map auf einmal. Wenn du sie auf element.attributeStyleMap aufrufst, entfernst du damit alle Inline-Styles des Elements. Das hat die gleiche Wirkung wie element.style.cssText = "" oder element.removeAttribute("style"), du bleibst dabei aber in der typisierten API.

Typische Anwendungsfälle:

Elemente nach einer per JavaScript gesteuerten Animation oder Drag-Interaktion in den Ausgangszustand zurückversetzen, damit wieder nur die Stylesheet-Regeln gelten.
Die Deklarationen einer CSSStyleRule über rule.styleMap komplett leeren, bevor du sie neu befüllst.

Wichtig: clear() wirkt nur auf die Map, auf der du die Methode aufrufst. Werte aus Stylesheets bleiben erhalten, wenn du die Inline-Map leerst. Die berechneten Werte aus element.computedStyleMap() stehen in einer schreibgeschützten StylePropertyMapReadOnly. Diese Map hat keine clear()-Methode.

Rückgabewert

Typ

undefined

Beschreibung

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

Beispiele

Alle Inline-Styles eines Elements entfernen

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

// Inline-Styles typisiert setzen
box.attributeStyleMap.set('width', CSS.px(200));
box.attributeStyleMap.set('opacity', 0.5);
console.log(box.attributeStyleMap.size);

// Alles wieder entfernen
box.attributeStyleMap.clear();
console.log(box.attributeStyleMap.size);
console.log(box.getAttribute('style'));

2 0 (leerer String oder null, je nach Browser)

Zustand nach Drag-Interaktion zurücksetzen

const handle = document.querySelector('#handle');
let startX = 0;

handle.addEventListener('pointerdown', (e) => {
  startX = e.clientX;
  handle.setPointerCapture(e.pointerId);
});

handle.addEventListener('pointermove', (e) => {
  if (!handle.hasPointerCapture(e.pointerId)) return;
  const dx = e.clientX - startX;
  handle.attributeStyleMap.set('transform', new CSSTransformValue([
    new CSSTranslate(CSS.px(dx), CSS.px(0))
  ]));
  handle.attributeStyleMap.set('cursor', 'grabbing');
});

handle.addEventListener('pointerup', () => {
  // Zurück zu den Stylesheet-Regeln
  handle.attributeStyleMap.clear();
});

Regel eines Stylesheets leeren und neu befüllen (mit Feature-Erkennung)

const sheet = new CSSStyleSheet();
sheet.replaceSync('.card { color: red; padding: 8px; }');
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

const rule = sheet.cssRules[0];

if (rule.styleMap && typeof rule.styleMap.clear === 'function') {
  rule.styleMap.clear();
  rule.styleMap.set('color', 'navy');
  console.log(rule.cssText);
} else {
  // Rückfall ohne Typed OM
  rule.style.cssText = 'color: navy;';
  console.log(rule.cssText);
}

.card { color: navy; }

// Wichtig · Fallstricke

Browser-Unterstützung: Das CSS Typed OM gibt es in Chromium-Browsern (Chrome, Edge, Opera) seit Version 66 und in Safari seit 16.4. Firefox unterstützt es nicht. Prüfe vor der Nutzung mit 'attributeStyleMap' in Element.prototype. Als Ersatz dient element.style.cssText = "" oder element.removeAttribute("style").
clear() löscht alle Inline-Deklarationen, auch solche, die andere Skripte oder Bibliotheken gesetzt haben, z. B. Positionswerte von Animations-Frameworks. Willst du nur eine bestimmte Eigenschaft entfernen, nimm stattdessen delete(property).
Eigenschaften aus Stylesheets, Klassen und dem Kaskaden-Ergebnis bleiben unberührt. Das Element kann also danach weiterhin gestylt aussehen.
Eine StylePropertyMapReadOnly, wie sie computedStyleMap() zurückgibt, hat keine clear()-Methode.
Benutzerdefinierte Eigenschaften (--variablen), die inline gesetzt wurden, werden ebenfalls entfernt.

Siehe auch

StylePropertyMap.delete() StylePropertyMap.set() StylePropertyMap.append() StylePropertyMapReadOnly.has() StylePropertyMapReadOnly.get()