Signatur
Beschreibung
Die Eigenschaft primitiveType gehört zum veralteten Interface CSSPrimitiveValue aus der Spezifikation DOM Level 2 Style. Sie gibt eine vorzeichenlose Ganzzahl (unsigned short) zurück, die angibt, welcher Art ein einzelner CSS-Wert ist, etwa eine Länge in Pixeln, ein Prozentwert, eine Zeichenkette, eine URL oder eine Farbe.
An diese Werte kam man normalerweise über CSSStyleDeclaration.getPropertyCSSValue(), z. B. auf dem Ergebnis von getComputedStyle(). Mit dem Typ ließ sich dann die passende Lesemethode aufrufen: getFloatValue(unitType) für Zahlen und Maße, getStringValue() für Zeichenketten, Bezeichner und URLs, getRGBColorValue() für Farben, getRectValue() für rect() und getCounterValue() für Zähler.
Zur Auswahl stehen die Konstanten am Interface CSSPrimitiveValue:
CSS_UNKNOWN(0),CSS_NUMBER(1),CSS_PERCENTAGE(2)- Längen:
CSS_EMS(3),CSS_EXS(4),CSS_PX(5),CSS_CM(6),CSS_MM(7),CSS_IN(8),CSS_PT(9),CSS_PC(10) - Winkel:
CSS_DEG(11),CSS_RAD(12),CSS_GRAD(13) - Zeit und Frequenz:
CSS_MS(14),CSS_S(15),CSS_HZ(16),CSS_KHZ(17) - Sonstiges:
CSS_DIMENSION(18),CSS_STRING(19),CSS_URI(20),CSS_IDENT(21),CSS_ATTR(22),CSS_COUNTER(23),CSS_RECT(24),CSS_RGBCOLOR(25)
Für neuen Code sollte man diese Eigenschaft nicht mehr verwenden. Der moderne Ersatz ist das CSS Typed Object Model: element.computedStyleMap() liefert Objekte wie CSSUnitValue, deren Eigenschaft unit (z. B. "px", "percent") diese Aufgabe übernimmt.
Rückgabewert
0 bis 25, die einer der CSSPrimitiveValue.CSS_*-Konstanten entspricht. Die Eigenschaft ist schreibgeschützt.Beispiele
Typ eines berechneten Werts prüfen (Altcode mit Feature-Erkennung)
const box = document.createElement('div');
box.style.width = '120px';
document.body.append(box);
const style = getComputedStyle(box);
if (typeof style.getPropertyCSSValue === 'function' && typeof CSSPrimitiveValue !== 'undefined') {
const value = style.getPropertyCSSValue('width');
if (value.primitiveType === CSSPrimitiveValue.CSS_PX) {
console.log('Breite in px:', value.getFloatValue(CSSPrimitiveValue.CSS_PX));
}
} else {
console.log('CSSPrimitiveValue wird nicht unterstützt');
}Typkonstante in einen lesbaren Namen übersetzen
const typeNames = [
'CSS_UNKNOWN', 'CSS_NUMBER', 'CSS_PERCENTAGE', 'CSS_EMS', 'CSS_EXS',
'CSS_PX', 'CSS_CM', 'CSS_MM', 'CSS_IN', 'CSS_PT', 'CSS_PC',
'CSS_DEG', 'CSS_RAD', 'CSS_GRAD', 'CSS_MS', 'CSS_S', 'CSS_HZ', 'CSS_KHZ',
'CSS_DIMENSION', 'CSS_STRING', 'CSS_URI', 'CSS_IDENT', 'CSS_ATTR',
'CSS_COUNTER', 'CSS_RECT', 'CSS_RGBCOLOR'
];
const describeType = (primitiveType) => typeNames[primitiveType] ?? 'unbekannt';
// Beispiel mit festen Zahlen, lauffähig auch ohne API-Unterstützung
console.log(describeType(2));
console.log(describeType(25));Moderner Ersatz: CSS Typed OM mit computedStyleMap()
const box = document.createElement('div');
box.style.width = '50%';
box.style.opacity = '0.5';
document.body.append(box);
if ('computedStyleMap' in Element.prototype) {
const styles = box.attributeStyleMap;
const width = styles.get('width');
console.log(width.value, width.unit);
const opacity = styles.get('opacity');
console.log(opacity.value, opacity.unit);
}// Wichtig · Fallstricke
Veraltet und entfernt: CSSPrimitiveValue und damit auch primitiveType sind aus allen aktuellen Browsern entfernt. Chrome, Edge und Safari haben getPropertyCSSValue() nie verlässlich unterstützt oder längst ausgebaut, Firefox hat die API mit Version 62 entfernt. Auch in Node.js gibt es sie nicht. Code, der sich darauf verlässt, bricht mit einem TypeError ab. Prüfe deshalb immer vorher, ob die Funktion vorhanden ist.
Kein Einfluss auf Umrechnung: primitiveType gibt nur an, in welcher Einheit der Wert vorliegt. getFloatValue() wirft eine DOMException (INVALID_ACCESS_ERR), wenn du eine Einheit anforderst, die sich nicht umrechnen lässt, z. B. CSS_EMS in CSS_PX oder einen String-Typ als Zahl.
Berechnete Werte: Auf getComputedStyle() lieferten ältere Engines Längen meist schon als CSS_PX zurück, auch wenn im Stylesheet em oder % stand.
Empfehlung: Nutze stattdessen das CSS Typed OM (computedStyleMap(), attributeStyleMap, CSSUnitValue.unit). Es wird in Chromium-Browsern und Safari ab 16.4 unterstützt, in Firefox bislang nicht vollständig. Als Rückfall bleibt das Auslesen des Strings über getPropertyValue(), den man dann selbst zerlegt.