StylePropertyMapReadOnly.keys() — Methode · JavaScript-Referenz

Signatur

StylePropertyMapReadOnly.prototype.keys()

Beschreibung

Die Methode keys() gehört zur CSS Typed Object Model API (Houdini). Sie gibt einen Iterator zurück, der nacheinander die Namen aller CSS-Eigenschaften einer StylePropertyMapReadOnly als Zeichenketten liefert, z. B. "color", "margin-top" oder benutzerdefinierte Eigenschaften wie "--akzent".

Eine StylePropertyMapReadOnly bekommt man meist über element.computedStyleMap() (berechnete Stile) oder, in der beschreibbaren Variante StylePropertyMap, über element.attributeStyleMap (Inline-Stile). Beide Maps unterstützen keys(), da StylePropertyMap von StylePropertyMapReadOnly erbt.

Nützlich ist keys(), wenn Sie nur wissen wollen, welche Eigenschaften vorhanden sind – etwa zum Debuggen, zum Filtern benutzerdefinierter Eigenschaften oder um anschließend gezielt mit get() typisierte Werte abzufragen. Brauchen Sie Name und Wert zugleich, sind entries() oder direkt for...of über die Map praktischer.

Der zurückgegebene Iterator ist einmalig durchlaufbar. Wollen Sie mehrfach darauf zugreifen oder Array-Methoden wie filter() verwenden, wandeln Sie ihn mit Array.from() oder dem Spread-Operator in ein Array um.

Rückgabewert

Typ

Iterator<string>

Beschreibung

Ein neuer Iterator, der die Eigenschaftsnamen (Zeichenketten) der Map in ihrer internen Reihenfolge liefert.

Beispiele

Alle berechneten Eigenschaftsnamen eines Elements auflisten

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

// Iterator in ein Array umwandeln
const namen = [...styles.keys()];
console.log(namen.length);
console.log(namen.slice(0, 3));

z. B. 350 ["accent-color", "align-content", "align-items"]

Benutzerdefinierte Eigenschaften (CSS-Variablen) herausfiltern

// CSS: :root { --akzent: #0af; --abstand: 8px; }
const styles = document.documentElement.computedStyleMap();

const variablen = Array.from(styles.keys())
  .filter((name) => name.startsWith('--'));

for (const name of variablen) {
  console.log(name, styles.get(name).toString());
}

--abstand 8px --akzent #0af

Inline-Stile über attributeStyleMap untersuchen

const box = document.createElement('div');
box.attributeStyleMap.set('width', CSS.px(200));
box.attributeStyleMap.set('opacity', 0.5);

for (const name of box.attributeStyleMap.keys()) {
  console.log(name);
}

opacity width

Mit Feature-Erkennung absichern

const el = document.body;

if ('computedStyleMap' in el) {
  const hatGrid = [...el.computedStyleMap().keys()].includes('grid-template-columns');
  console.log('grid-template-columns vorhanden:', hatGrid);
} else {
  // Fallback für Browser ohne CSS Typed OM (z. B. Firefox)
  const cs = getComputedStyle(el);
  console.log('Anzahl Eigenschaften:', cs.length);
}

grid-template-columns vorhanden: true

// Wichtig · Fallstricke

Browser-Kompatibilität: Die CSS Typed OM wird von Chromium-Browsern (ab Version 66) und Safari (ab 16.4) unterstützt, von Firefox bislang nicht. Prüfen Sie vorher mit 'computedStyleMap' in element und greifen Sie sonst auf getComputedStyle() zurück.
Der Iterator ist nach einem Durchlauf erschöpft – für wiederholte Nutzung mit Array.from() in ein Array umwandeln.
Die Reihenfolge der Schlüssel ist nicht die Reihenfolge im Stylesheet: Bei computedStyleMap() sind Standardeigenschaften meist alphabetisch sortiert, benutzerdefinierte Eigenschaften können gesondert folgen.
Kurzschreibweisen wie margin tauchen in der berechneten Map in der Regel nicht auf, nur ihre Langformen (margin-top usw.).
computedStyleMap() liefert eine Momentaufnahme; ändern sich Stile danach, rufen Sie die Methode erneut auf.

Siehe auch

StylePropertyMapReadOnly StylePropertyMapReadOnly.entries() StylePropertyMapReadOnly.values() StylePropertyMapReadOnly.get() StylePropertyMapReadOnly.has() StylePropertyMapReadOnly.size Element.computedStyleMap() StylePropertyMap