Signatur
Beschreibung
CSSValue gehört zum alten DOM Level 2 Style-Objektmodell. Es beschreibt den Wert einer CSS-Eigenschaft als Objekt statt als bloßen String. Ein CSSValue bekam man früher über CSSStyleDeclaration.getPropertyCSSValue(name), meist auf dem Ergebnis von getComputedStyle().
Das Interface hat zwei Eigenschaften:
cssText(string): der Wert als CSS-Text, z. B."16px".cssValueType(number, nur lesbar): die Art des Werts als eine dieser Konstanten:CSSValue.CSS_INHERIT(0),CSSValue.CSS_PRIMITIVE_VALUE(1),CSSValue.CSS_VALUE_LIST(2) oderCSSValue.CSS_CUSTOM(3).
Es gibt zwei spezialisierte Unter-Interfaces: CSSPrimitiveValue für einzelne Werte mit Einheit, Farbe oder URL und CSSValueList für Wertlisten wie bei font-family oder transform.
Heute sollten Sie CSSValue nicht mehr verwenden. Für neuen Code gibt es zwei Wege: getComputedStyle(el).getPropertyValue(), wenn ein String reicht, oder das CSS Typed Object Model (element.computedStyleMap(), CSSStyleValue, CSSUnitValue), wenn Sie typisierte Werte brauchen. Die Beispiele unten zeigen die alte Nutzung (nur mit Feature-Erkennung) und die modernen Ersatzlösungen.
Rückgabewert
CSSStyleDeclaration.getPropertyCSSValue(). Einen öffentlichen Konstruktor gab es nie. In aktuellen Browsern existiert keins von beiden mehr.Beispiele
Alte API mit Feature-Erkennung und Fallback
const el = document.body;
const style = getComputedStyle(el);
if (typeof style.getPropertyCSSValue === 'function') {
// Historische DOM-Level-2-API
const value = style.getPropertyCSSValue('font-size');
console.log(value.cssText, value.cssValueType);
} else {
// Moderner Fallback: String-Wert
console.log('Nicht unterstützt, Fallback:', style.getPropertyValue('font-size'));
}cssValueType auswerten (historisch)
// Wertet ein CSSValue-ähnliches Objekt nach der alten Spezifikation aus
const TYPES = { 0: 'CSS_INHERIT', 1: 'CSS_PRIMITIVE_VALUE', 2: 'CSS_VALUE_LIST', 3: 'CSS_CUSTOM' };
const describe = (cssValue) =>
`${cssValue.cssText} → ${TYPES[cssValue.cssValueType] ?? 'unbekannt'}`;
// Nachgebildetes Objekt, da Browser das Interface nicht mehr liefern
const fake = { cssText: 'Arial, sans-serif', cssValueType: 2 };
console.log(describe(fake));Moderner Ersatz: CSS Typed OM
const box = document.createElement('div');
box.style.width = '250px';
document.body.append(box);
if ('computedStyleMap' in Element.prototype) {
const width = box.computedStyleMap().get('width'); // CSSUnitValue
console.log(width.value, width.unit); // Zahl und Einheit getrennt
console.log(width.to('px').value * 2); // direkt rechnen
} else {
console.log(parseFloat(getComputedStyle(box).width));
}Wertlisten ohne CSSValueList lesen
document.body.style.fontFamily = '"Helvetica Neue", Arial, sans-serif';
const families = getComputedStyle(document.body)
.getPropertyValue('font-family')
.split(',')
.map((f) => f.trim().replace(/^["']|["']$/g, ''));
console.log(families);// Wichtig · Fallstricke
Veraltet und entfernt: CSSValue, CSSPrimitiveValue, CSSValueList und getPropertyCSSValue() stehen in keinem aktuellen Standard mehr. Firefox hat sie mit Version 62 entfernt. Chromium und Safari haben sie schon früher entfernt bzw. nie vollständig unterstützt. Code, der sich darauf verlässt, führt zu einem TypeError („getPropertyCSSValue is not a function“).
- Prüfen Sie vor jedem Zugriff mit Feature-Erkennung, ob die Funktion existiert, und sehen Sie immer einen Fallback auf
getPropertyValue()vor. - Das CSS Typed OM (
computedStyleMap()) ist der moderne Nachfolger. Chromium und Safari (ab 16.4) unterstützen es, Firefox bisher nur eingeschränkt oder gar nicht. Prüfen Sie es deshalb ebenfalls vor der Nutzung. - Berechnete Werte kommen immer aufgelöst zurück:
emund%meist alspx, Farben meist alsrgb(). Vergleichen Sie also nicht mit den Werten aus dem Stylesheet. getComputedStyle()kann einen Reflow auslösen. Vermeiden Sie häufige Aufrufe in Schleifen oder Animationen.