StylePropertyMapReadOnly.get() — Methode · JavaScript-Referenz

Signatur

StylePropertyMapReadOnly.prototype.get(property)

Beschreibung

get() gehört zur CSS Typed Object Model API (Houdini). Die Methode liest den Wert einer CSS-Eigenschaft aus einer StylePropertyMapReadOnly aus. Solche Maps bekommst du zum Beispiel über element.computedStyleMap() (berechnete Stile) oder element.attributeStyleMap (Inline-Stile). Anders als bei getComputedStyle() erhältst du keinen String, sondern ein typisiertes Objekt: CSSUnitValue für Zahlen mit Einheit, CSSKeywordValue für Schlüsselwörter wie auto, CSSMathValue für calc()-Ausdrücke oder CSSUnparsedValue für benutzerdefinierte Eigenschaften (--variable).

Das ist praktisch, wenn du mit Stilwerten rechnen willst, etwa bei Animationen, Layout-Berechnungen oder Messungen. Einen String wie "16px" musst du dann nicht erst mit parseFloat() zerlegen, denn Zahl und Einheit liegen direkt als value und unit vor.

Manche Eigenschaften können mehrere Werte haben, zum Beispiel background-image mit mehreren Ebenen oder transition-property. Dann liefert get() nur den ersten Wert. Alle Werte bekommst du mit getAll(). Ist die Eigenschaft in der Map nicht gesetzt (das kommt vor allem bei attributeStyleMap vor), gibt die Methode undefined zurück.

Parameter

Name	Typ	Default	Beschreibung
$property Pflicht	string		Name der CSS-Eigenschaft in CSS-Schreibweise (mit Bindestrichen), z. B. `"padding-top"`, `"opacity"` oder eine benutzerdefinierte Eigenschaft wie `"--akzentfarbe"`. camelCase wie `"paddingTop"` ist ungültig.

Rückgabewert

Typ

CSSStyleValue | undefined

Beschreibung

Ein von CSSStyleValue abgeleitetes Objekt, z. B. CSSUnitValue, CSSKeywordValue, CSSMathSum, CSSTransformValue, CSSImageValue oder CSSUnparsedValue. Ist die Eigenschaft in der Map nicht vorhanden, ist der Rückgabewert undefined.

Beispiele

Berechneten Innenabstand als Zahl auslesen

// HTML: <div class="karte" style="padding: 1rem">…</div>
const karte = document.querySelector('.karte');
const stile = karte.computedStyleMap();

const padding = stile.get('padding-top');
console.log(padding.value, padding.unit);

// Mit dem Wert direkt rechnen, ohne parseFloat()
const doppelt = CSS.px(padding.value * 2);
console.log(doppelt.toString());

16 "px" 32px

Schlüsselwörter von Zahlenwerten unterscheiden

const box = document.querySelector('#box');
box.style.width = 'auto';

// attributeStyleMap enthält nur Inline-Stile
const breite = box.attributeStyleMap.get('width');

if (breite instanceof CSSKeywordValue) {
  console.log('Schlüsselwort:', breite.value);
} else if (breite instanceof CSSUnitValue) {
  console.log('Feste Breite:', breite.value, breite.unit);
}

// Nicht gesetzte Inline-Eigenschaft liefert undefined
console.log(box.attributeStyleMap.get('opacity'));

Schlüsselwort: auto undefined

Benutzerdefinierte Eigenschaft (CSS-Variable) lesen

// CSS: :root { --akzentfarbe: #0a84ff; }
const root = document.documentElement;
const akzent = root.computedStyleMap().get('--akzentfarbe');

console.log(akzent instanceof CSSUnparsedValue);
console.log(akzent.toString().trim());

true #0a84ff

Mit Feature-Erkennung und Fallback

const leseOpazitaet = (el) => {
  if ('computedStyleMap' in el) {
    return el.computedStyleMap().get('opacity').value;
  }
  // Fallback, z. B. für Firefox
  return parseFloat(getComputedStyle(el).opacity);
};

console.log(leseOpazitaet(document.body));

1

// Wichtig · Fallstricke

Browser-Unterstützung: Das CSS Typed OM gibt es in Chromium-Browsern (ab Version 66) und in Safari (ab 16.4). Firefox unterstützt es bisher nicht. Prüfe deshalb vorher, ob die API vorhanden ist ('computedStyleMap' in Element.prototype), und nutze sonst getComputedStyle() als Ersatz.
Nur der erste Wert: Bei Eigenschaften mit mehreren Werten (background-image, transition-duration …) liefert get() nur den ersten Eintrag. Für alle Werte nimmst du getAll().
Ungültige Namen: Ist der Eigenschaftsname unbekannt und keine benutzerdefinierte Eigenschaft, wirft die Methode einen TypeError. Das passiert auch bei camelCase ('backgroundColor').
Kurzschreibweisen: Bei Kurzformen wie margin oder border ist das Ergebnis oft ein CSSStyleValue, der nur einen String enthält, und kein typisiertes Objekt. Lies besser die einzelnen Langformen aus, z. B. margin-top.
Nur eine Momentaufnahme: Das zurückgegebene Objekt aktualisiert sich nicht, wenn sich der Stil später ändert. Rufe get() erneut auf, um den neuen Wert zu bekommen.
Performance: Wie getComputedStyle() kann auch computedStyleMap().get() eine Neuberechnung der Stile und des Layouts erzwingen. Vermeide es deshalb, in engen Schleifen abwechselnd zu lesen und zu schreiben.

Siehe auch

StylePropertyMapReadOnly StylePropertyMapReadOnly.getAll() StylePropertyMapReadOnly.has() StylePropertyMap.set() Element.computedStyleMap() HTMLElement.attributeStyleMap CSSStyleValue CSSUnitValue getComputedStyle()