HTMLElement.attributeStyleMap — Eigenschaft · JavaScript-Referenz

Signatur

get HTMLElement.attributeStyleMap

Beschreibung

Die schreibgeschützte Eigenschaft attributeStyleMap gehört zum CSS Typed Object Model (CSS Typed OM). Sie liefert ein StylePropertyMap-Objekt, das die im Inline-style-Attribut eines Elements gesetzten Deklarationen abbildet. Sie ist das typisierte Gegenstück zu element.style: Statt Zeichenketten wie "200px" zu verarbeiten, arbeitet man mit Objekten wie CSSUnitValue ({ value: 200, unit: "px" }).

Die Map ist lebendig: Änderungen über set(), append(), delete() oder clear() wirken sofort auf das style-Attribut. Umgekehrt spiegeln sich Änderungen über element.style oder setAttribute("style", …) direkt in der Map wider. Die Eigenschaft selbst kann nicht neu zugewiesen werden – nur ihr Inhalt ist veränderbar.

Nützlich ist attributeStyleMap vor allem dann, wenn man mit Stilwerten rechnen will (z. B. in Animationen, beim Ziehen von Elementen oder bei Layout-Berechnungen). Das spart fehleranfälliges Parsen mit parseFloat() und String-Verkettung und ist in der Regel performanter, weil der Browser die Werte nicht erneut aus Text parsen muss. Zum Anlegen typisierter Werte dienen Fabrikfunktionen wie CSS.px(), CSS.percent(), CSS.deg() oder CSS.number().

Wichtig: attributeStyleMap enthält nur Inline-Stile. Werte aus Stylesheets oder vererbte Werte erscheinen hier nicht – dafür gibt es element.computedStyleMap(), das den berechneten Stil (schreibgeschützt) liefert.

Rückgabewert

Typ

StylePropertyMap

Beschreibung

Ein lebendiges StylePropertyMap-Objekt mit den Methoden get(), getAll(), has(), set(), append(), delete(), clear(), der Eigenschaft size sowie Iteratoren (entries(), keys(), values(), forEach()). get() liefert ein CSSStyleValue (meist CSSUnitValue oder CSSKeywordValue) oder undefined, wenn die Eigenschaft nicht inline gesetzt ist.

Beispiele

Inline-Stil typisiert setzen und auslesen

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

// Typisierte Werte über die CSS-Fabrikfunktionen setzen
box.attributeStyleMap.set('width', CSS.px(200));
box.attributeStyleMap.set('opacity', CSS.number(0.5));

const width = box.attributeStyleMap.get('width');
console.log(width.value, width.unit);   // Zahl + Einheit getrennt
console.log(width.toString());          // als CSS-Text
console.log(box.getAttribute('style')); // Attribut wurde aktualisiert
console.log(box.attributeStyleMap.has('height'));

200 px 200px width: 200px; opacity: 0.5; false

Mit Werten rechnen statt Strings parsen (Zoom-Button)

const image = document.querySelector('.zoom-image');
const zoomIn = document.querySelector('#zoom-in');

image.attributeStyleMap.set('width', CSS.px(300));

zoomIn.addEventListener('click', () => {
  const current = image.attributeStyleMap.get('width');
  // Kein parseFloat('300px') nötig – direkt mit .value rechnen
  const next = Math.min(current.value * 1.25, 1200);
  image.attributeStyleMap.set('width', CSS.px(next));
  console.log(`Neue Breite: ${image.attributeStyleMap.get('width')}`);
});

Neue Breite: 375px (nach dem ersten Klick)

Alle Inline-Stile auflisten, entfernen und Feature-Erkennung

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

if ('attributeStyleMap' in HTMLElement.prototype) {
  card.attributeStyleMap.set('padding-top', CSS.rem(1.5));
  card.attributeStyleMap.set('transform', 'rotate(5deg)'); // Strings werden geparst

  for (const [prop, values] of card.attributeStyleMap) {
    console.log(prop, values.map(String).join(', '));
  }

  card.attributeStyleMap.delete('transform');
  console.log('Anzahl:', card.attributeStyleMap.size);

  card.attributeStyleMap.clear(); // entfernt alle Inline-Stile
  console.log('Anzahl nach clear():', card.attributeStyleMap.size);
} else {
  // Fallback für Browser ohne CSS Typed OM (z. B. Firefox)
  card.style.paddingTop = '1.5rem';
}

padding-top 1.5rem transform rotate(5deg) Anzahl: 1 Anzahl nach clear(): 0

// Wichtig · Fallstricke

Browser-Kompatibilität: CSS Typed OM gibt es in Chromium-Browsern (Chrome 66+, Edge 79+, Opera) und seit Safari 16.4. Firefox unterstützt es bislang nicht. Deshalb vorher per 'attributeStyleMap' in HTMLElement.prototype prüfen und auf element.style zurückfallen.
Nur Inline-Stile: Werte aus Stylesheets tauchen nicht auf; get() liefert dann undefined. Für den tatsächlich wirksamen Wert element.computedStyleMap() verwenden.
Ungültige Werte: set() wirft einen TypeError, wenn der Wert nicht zur Eigenschaft passt (z. B. set('width', CSS.deg(10))). element.style ignoriert solche Werte dagegen stillschweigend.
Eigenschaftsnamen werden in CSS-Schreibweise angegeben ('background-color', nicht 'backgroundColor'). Eigene Eigenschaften (--main-color) liefern in der Regel einen CSSUnparsedValue.
Kurzschreibweisen (margin, border) und komplexe Werte wie calc() kommen als CSSMathValue oder allgemeines CSSStyleValue zurück – nicht immer als CSSUnitValue mit .value.
Die Eigenschaft ist im Mixin ElementCSSInlineStyle definiert und existiert daher auch auf SVGElement und MathMLElement.
Eine Content Security Policy mit style-src ohne 'unsafe-inline' blockiert Inline-Stile, die per CSSOM gesetzt werden, nicht. Das gilt auch für attributeStyleMap.

Siehe auch

HTMLElement.outerText HTMLElement.style HTMLElement.title HTMLElement.accessKey HTMLElement.accessKeyLabel ElementInternals.ariaValueMax MathMLElement.attributeStyleMap