StylePropertyMapReadOnly.getAll() — Methode · JavaScript-Referenz

Signatur

StylePropertyMapReadOnly.prototype.getAll(property)

Beschreibung

Die Methode getAll() gehört zur CSS Typed Object Model API (Houdini). Sie liest aus einer StylePropertyMapReadOnly, etwa aus element.computedStyleMap(), alle Werte einer CSS-Eigenschaft aus und gibt sie als Array typisierter CSSStyleValue-Objekte zurück, zum Beispiel CSSUnitValue, CSSKeywordValue oder CSSImageValue.

Im Unterschied zu get(), das nur den ersten Wert liefert, ist getAll() für listenwertige Eigenschaften gedacht, bei denen mehrere kommagetrennte Werte vorkommen können: background-image, transition-duration, animation-name, font-family oder box-shadow. Jeder Listeneintrag wird zu einem eigenen Objekt im Array.

Bei Eigenschaften mit nur einem Wert enthält das Array genau ein Element. Ist die Eigenschaft in der Map nicht vorhanden, bekommst du ein leeres Array zurück. Die typisierten Objekte kannst du ohne String-Parsing direkt auswerten, zum Beispiel über value und unit bei einem CSSUnitValue.

Parameter

Name	Typ	Default	Beschreibung
$property Pflicht	string		Name der CSS-Eigenschaft in CSS-Schreibweise, z. B. `'background-image'` oder `'transition-duration'`. Auch benutzerdefinierte Eigenschaften (`'--meine-var'`) sind erlaubt.

Rückgabewert

Typ

Array<CSSStyleValue>

Beschreibung

Ein Array mit allen Werten der Eigenschaft als CSSStyleValue-Objekte (bzw. Unterklassen). Ist die Eigenschaft nicht vorhanden, ist das Array leer.

Beispiele

Mehrere Transition-Dauern auslesen

// CSS: .box { transition: opacity 0.3s, transform 500ms; }
const box = document.querySelector('.box');
const styles = box.computedStyleMap();

const durations = styles.getAll('transition-duration');
durations.forEach((d) => console.log(d.value, d.unit));

// Längste Dauer in Millisekunden ermitteln
const maxMs = Math.max(...durations.map((d) => d.to('ms').value));
console.log(`Längste Transition: ${maxMs} ms`);

0.3 s 0.5 s Längste Transition: 500 ms

Alle Hintergrundbilder eines Elements auflisten

// CSS: .hero { background-image: url(a.png), linear-gradient(red, blue); }
const hero = document.querySelector('.hero');
const images = hero.computedStyleMap().getAll('background-image');

console.log(images.length);
images.forEach((img) => console.log(img.constructor.name, img.toString()));

2 CSSImageValue url("https://example.com/a.png") CSSStyleValue linear-gradient(rgb(255, 0, 0), rgb(0, 0, 255))

Vergleich mit get() und Inline-Styles

const el = document.createElement('div');
el.style.fontFamily = 'Inter, Arial, sans-serif';
document.body.append(el);

// attributeStyleMap ist eine StylePropertyMap (erbt getAll)
console.log(el.attributeStyleMap.get('font-family').toString());
console.log(el.attributeStyleMap.getAll('font-family').length);

// Nicht gesetzte Eigenschaft liefert ein leeres Array
console.log(el.attributeStyleMap.getAll('box-shadow'));

Inter, Arial, sans-serif 1 []

// Wichtig · Fallstricke

Browser-Kompatibilität: Die CSS Typed OM wird in Chromium-Browsern seit Version 66 und in Safari seit 16.4 unterstützt. Firefox unterstützt computedStyleMap() bisher nicht standardmäßig. Prüfe die Verfügbarkeit per Feature-Detection, z. B. if ('computedStyleMap' in Element.prototype).
Ob ein Wert in mehrere Einträge zerlegt wird, hängt von der Eigenschaft ab. font-family wird je nach Browser und Quelle (attributeStyleMap oder computedStyleMap()) oft als ein nicht weiter zerlegter CSSStyleValue zurückgegeben.
Nicht jeder Wert wird zu einer spezifischen Unterklasse. Komplexe Werte wie Verläufe sind oft nur generische CSSStyleValue-Objekte, die du ausschließlich über toString() auswerten kannst.
Ein ungültiger Eigenschaftsname löst einen TypeError aus. Kurzschreibweisen wie transition werden nicht in ihre Einzel-Eigenschaften (Langformen) zerlegt, frage daher gezielt die Langform ab.
computedStyleMap() löst eine Stilberechnung aus. Häufige Aufrufe in Schleifen oder Animationen können die Leistung verschlechtern.

Siehe auch

StylePropertyMapReadOnly StylePropertyMapReadOnly.get() StylePropertyMapReadOnly.has() Element.computedStyleMap() CSSStyleValue StylePropertyMap.append() StylePropertyMapReadOnly.forEach()