StylePropertyMapReadOnly.forEach() — Methode · JavaScript-Referenz

Signatur

StylePropertyMapReadOnly.prototype.forEach(callbackFn, thisArg)

Beschreibung

Die Methode forEach() gehört zur CSS Typed Object Model API (Typed OM). Sie durchläuft alle Einträge einer StylePropertyMapReadOnly und ruft für jede CSS-Eigenschaft die übergebene Funktion auf. Eine solche Map bekommt man meist über element.computedStyleMap(). Dort stehen die berechneten Stile eines Elements.

Anders als bei getComputedStyle() sind die Werte keine Zeichenketten. Man erhält ein Array von CSSStyleValue-Objekten, etwa CSSUnitValue mit value und unit oder CSSKeywordValue. Das Array gibt es, weil manche Eigenschaften mehrere Werte haben können (z. B. transition-property oder background-image). Mit den typisierten Werten kann man direkt rechnen, ohne Zeichenketten zu zerlegen.

Die Methode verhält sich wie Map.prototype.forEach(): Der Callback bekommt Wert, Schlüssel (Eigenschaftsname) und die Map selbst. Die Einträge sind alphabetisch nach Eigenschaftsnamen sortiert. Benutzerdefinierte Eigenschaften (--foo) stehen am Ende. Nutzen kann man die Methode zum Debuggen, zum Protokollieren von Stilen oder um gezielt Eigenschaften mit bestimmten Einheiten herauszufiltern.

Parameter

Name	Typ	Default	Beschreibung
$callbackFn Pflicht	(value: CSSStyleValue[], key: string, map: StylePropertyMapReadOnly) => void		Wird einmal pro Eintrag aufgerufen. Argumente: `value` (Array von `CSSStyleValue`-Objekten), `key` (Name der CSS-Eigenschaft, z. B. `"padding-top"`) und `map` (die durchlaufene Map).
$thisArg	any	undefined	Wert für `this` innerhalb von `callbackFn`. Bei Pfeilfunktionen hat er keine Wirkung.

Beispiele

Alle berechneten Stile eines Elements ausgeben

const button = document.querySelector('button');
const styles = button.computedStyleMap();

styles.forEach((values, property) => {
  // values ist immer ein Array von CSSStyleValue-Objekten
  console.log(`${property}: ${values.map(v => v.toString()).join(', ')}`);
});

accent-color: auto align-content: normal ... width: 84px ...

Nur Eigenschaften mit Pixelwerten herausfiltern

const box = document.querySelector('.box');
const pxProps = {};

box.computedStyleMap().forEach((values, property) => {
  const [first] = values;
  // CSSUnitValue hat value und unit
  if (first instanceof CSSUnitValue && first.unit === 'px' && first.value !== 0) {
    pxProps[property] = first.value;
  }
});

console.log(pxProps);

{ "border-top-width": 1, "height": 120, "padding-left": 16, "width": 300, ... }

Benutzerdefinierte Eigenschaften (CSS-Variablen) auslesen

// CSS: :root { --brand-color: #0066cc; --spacing: 8px; }
const rootStyles = document.documentElement.computedStyleMap();
const customProps = new Map();

rootStyles.forEach((values, property) => {
  if (property.startsWith('--')) {
    customProps.set(property, values[0].toString().trim());
  }
});

console.log(Object.fromEntries(customProps));

{ "--brand-color": "#0066cc", "--spacing": "8px" }

Mit Feature-Erkennung und thisArg

const logger = {
  prefix: '[Stil]',
  log(values, property) {
    if (property.startsWith('margin')) {
      console.log(this.prefix, property, String(values[0]));
    }
  }
};

const el = document.querySelector('main');
if ('computedStyleMap' in el) {
  // Normale Funktion, daher greift thisArg
  el.computedStyleMap().forEach(logger.log, logger);
} else {
  console.warn('CSS Typed OM wird nicht unterstützt');
}

[Stil] margin-block-end 0px [Stil] margin-block-start 0px [Stil] margin-bottom 0px ...

// Wichtig · Fallstricke

Der Wert ist immer ein Array. Wer values.unit statt values[0].unit schreibt, bekommt undefined. Das ist ein häufiger Fehler.
Viele Einträge: computedStyleMap() enthält alle berechneten Eigenschaften, oft mehrere hundert. Wenn du nur einzelne Werte brauchst, ist map.get('width') oder map.has() deutlich günstiger.
Nicht jeder Wert ist typisiert: Eigenschaften, die der Browser noch nicht vollständig unterstützt, kommen als allgemeines CSSStyleValue zurück. Dann hilft nur toString(). Benutzerdefinierte Eigenschaften, die nicht mit @property registriert sind, erscheinen als CSSUnparsedValue.
Nur lesen: StylePropertyMapReadOnly hat keine Methoden zum Ändern. Zum Schreiben nutzt du element.attributeStyleMap (eine StylePropertyMap) mit set().
Keine Live-Ansicht: Nach Stiländerungen solltest du computedStyleMap() erneut aufrufen, um sicher aktuelle Werte zu bekommen.
Browser-Unterstützung: Chromium-Browser seit Version 66 und Safari seit 16.4. Firefox unterstützt die Typed OM erst in neueren Versionen. Prüfe vorher per Feature-Erkennung ('computedStyleMap' in Element.prototype) und falle bei Bedarf auf getComputedStyle() zurück.

Siehe auch

StylePropertyMapReadOnly.get() StylePropertyMapReadOnly.getAll() StylePropertyMapReadOnly.has() StylePropertyMapReadOnly.keys() StylePropertyMapReadOnly.entries()