Signatur
Beschreibung
cssValueType gehört zum veralteten Interface CSSValue aus der Spezifikation DOM Level 2 Style. Die Eigenschaft ist schreibgeschützt. Sie liefert eine vorzeichenlose Ganzzahl, die sagt, in welche Kategorie ein CSS-Wert fällt. Anhand dieser Zahl entscheidet man, ob man das Objekt als CSSPrimitiveValue oder als CSSValueList weiterverarbeitet.
Diese Werte sind als Konstanten auf CSSValue definiert:
CSSValue.CSS_INHERIT(0): Der Wert ist das Schlüsselwortinherit.cssTextenthält dann"inherit".CSSValue.CSS_PRIMITIVE_VALUE(1): Ein einzelner, primitiver Wert wie12px,redoderurl(…). Das Objekt ist dann einCSSPrimitiveValue.CSSValue.CSS_VALUE_LIST(2): Eine Liste von Werten, z. B. beifont-familyodermargin. Das Objekt ist dann eineCSSValueList.CSSValue.CSS_CUSTOM(3): Ein benutzerdefinierter Wert, den die Implementierung selbst festlegt.
An ein CSSValue-Objekt kam man früher meist über CSSStyleDeclaration.getPropertyCSSValue(), zum Beispiel auf dem Ergebnis von window.getComputedStyle(). Diese API ist aus allen aktuellen Browsern entfernt. In neuem Code verwendet man stattdessen die CSS Typed Object Model API mit element.computedStyleMap() und CSSStyleValue, oder einfach getPropertyValue(), das eine Zeichenkette liefert.
Rückgabewert
unsigned short): 0 (CSS_INHERIT), 1 (CSS_PRIMITIVE_VALUE), 2 (CSS_VALUE_LIST) oder 3 (CSS_CUSTOM).Beispiele
Werttyp einer berechneten Eigenschaft ermitteln (Altbrowser)
const el = document.body;
const style = window.getComputedStyle(el);
if (typeof style.getPropertyCSSValue === 'function') {
const value = style.getPropertyCSSValue('color');
// Zahl in einen lesbaren Namen übersetzen
const names = ['CSS_INHERIT', 'CSS_PRIMITIVE_VALUE', 'CSS_VALUE_LIST', 'CSS_CUSTOM'];
console.log(value.cssValueType, names[value.cssValueType]);
} else {
console.log('CSSValue-API wird von diesem Browser nicht unterstützt.');
}Je nach Typ unterschiedlich verarbeiten
const describeValue = (cssValue) => {
switch (cssValue.cssValueType) {
case 0: // CSS_INHERIT
return 'geerbt';
case 1: // CSS_PRIMITIVE_VALUE
return `primitiv: ${cssValue.cssText}`;
case 2: { // CSS_VALUE_LIST
const items = [];
for (let i = 0; i < cssValue.length; i++) {
items.push(cssValue.item(i).cssText);
}
return `Liste: ${items.join(' | ')}`;
}
default:
return `benutzerdefiniert: ${cssValue.cssText}`;
}
};
const style = getComputedStyle(document.documentElement);
if (style.getPropertyCSSValue) {
console.log(describeValue(style.getPropertyCSSValue('font-family')));
}Moderne Alternative: CSS Typed OM
const box = document.createElement('div');
box.style.margin = '10px 2em';
document.body.append(box);
if ('computedStyleMap' in Element.prototype) {
const styles = box.computedStyleMap();
const top = styles.get('margin-top');
// CSSUnitValue statt CSSPrimitiveValue
console.log(top instanceof CSSUnitValue, top.value, top.unit);
} else {
// Fallback: Zeichenkette auswerten
console.log(getComputedStyle(box).getPropertyValue('margin-top'));
}// Wichtig · Fallstricke
Veraltet und entfernt: Das Interface CSSValue und die Methode getPropertyCSSValue() gehören nicht mehr zum Webstandard. Firefox hat sie in Version 62 entfernt, Chromium-Browser und Safari bieten sie ebenfalls nicht mehr an. Deshalb immer zuerst prüfen, ob die API vorhanden ist, etwa mit typeof style.getPropertyCSSValue === 'function'. Besser ist es, ganz auf die CSS Typed OM (computedStyleMap()) oder auf getPropertyValue() umzusteigen.
Kurzschreibweisen: Für Kurzschreibweisen wie margin oder background lieferte getPropertyCSSValue() in manchen Implementierungen null. Ein Zugriff auf cssValueType löst dann einen TypeError aus. Deshalb immer auf null prüfen.
Konstanten statt Zahlen: Wo verfügbar, sind CSSValue.CSS_PRIMITIVE_VALUE und die anderen Konstanten besser lesbar als die festen Zahlenwerte. In Umgebungen ohne CSSValue ist allerdings auch die Konstante nicht definiert.