Signatur
Beschreibung
Mit getFloatValue() liest man aus einem CSSPrimitiveValue-Objekt den Zahlenwert einer CSS-Angabe, etwa einer Länge, eines Winkels oder einer Zeitangabe. Über den Parameter unitType legt man die gewünschte Zieleinheit fest. Der Browser rechnet den Wert dann um, zum Beispiel von in nach px oder von s nach ms.
An ein CSSPrimitiveValue kam man früher meist über getComputedStyle(element).getPropertyCSSValue("width") oder element.style.getPropertyCSSValue(). Die Einheit des gespeicherten Werts steht in der Eigenschaft primitiveType. Die Einheiten-Konstanten sind als statische Eigenschaften des Interfaces verfügbar, z. B. CSSPrimitiveValue.CSS_PX (5), CSS_PERCENTAGE (2), CSS_EMS (3), CSS_DEG (11) oder CSS_MS (14).
Die Methode gehört zum veralteten CSS-Objektmodell aus DOM Level 2 Style und wurde aus den meisten Browsern entfernt. Für neuen Code nutzt man stattdessen das CSS Typed OM (element.computedStyleMap() mit CSSUnitValue und .to("px")) oder als Notlösung parseFloat(getComputedStyle(el).width).
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $unitType Pflicht | number | Einheiten-Konstante, in die der Wert umgerechnet werden soll, z. B. CSSPrimitiveValue.CSS_PX (5), CSS_CM (6), CSS_MM (7), CSS_IN (8), CSS_PT (9), CSS_DEG (11), CSS_RAD (12), CSS_MS (14), CSS_S (15), CSS_NUMBER (1) oder CSS_PERCENTAGE (2). |
Rückgabewert
DOMException (InvalidAccessError) ausgelöst.Beispiele
Berechnete Breite in Pixeln auslesen (Altbrowser)
const box = document.querySelector("#box");
const style = getComputedStyle(box);
if (typeof style.getPropertyCSSValue === "function") {
const value = style.getPropertyCSSValue("width");
const px = value.getFloatValue(CSSPrimitiveValue.CSS_PX);
console.log(`Breite: ${px}px`);
} else {
console.log("getPropertyCSSValue wird nicht unterstützt");
}Umrechnung in andere Einheiten mit Fehlerbehandlung
const el = document.querySelector(".card");
el.style.marginLeft = "1in";
const toUnit = (cssValue, unit) => {
try {
return cssValue.getFloatValue(unit);
} catch (err) {
// InvalidAccessError: Umrechnung nicht möglich (z. B. px -> deg)
console.warn("Umrechnung fehlgeschlagen:", err.name);
return NaN;
}
};
if (el.style.getPropertyCSSValue) {
const margin = el.style.getPropertyCSSValue("margin-left");
console.log(toUnit(margin, CSSPrimitiveValue.CSS_PX)); // 96
console.log(toUnit(margin, CSSPrimitiveValue.CSS_CM)); // 2.54
console.log(toUnit(margin, CSSPrimitiveValue.CSS_DEG)); // NaN
}Moderner Ersatz mit CSS Typed OM und Fallback
const getWidthPx = (el) => {
// Bevorzugt: CSS Typed OM
if (el.computedStyleMap) {
const width = el.computedStyleMap().get("width");
if (width instanceof CSSUnitValue) {
return width.to("px").value;
}
}
// Fallback: String aus getComputedStyle parsen
return parseFloat(getComputedStyle(el).width);
};
console.log(getWidthPx(document.body));// Wichtig · Fallstricke
- Veraltet:
CSSPrimitiveValueundgetPropertyCSSValue()stammen aus DOM Level 2 Style und wurden aus Chrome/Blink und Firefox (ab Version 62) entfernt. In neuem Code nicht mehr verwenden, sondern auf das CSS Typed OM (computedStyleMap(),CSSUnitValue.to()) umsteigen. - Vor dem Aufruf immer die Unterstützung prüfen (
typeof style.getPropertyCSSValue === "function"). Sonst gibt es einenTypeError. - Ist der Wert keine Zahl (z. B.
auto, eine Farbe oder ein String) oder ist die Umrechnung unmöglich (Länge in Winkel, Prozent in Pixel), wird einInvalidAccessErrorausgelöst. Deshalb vorherprimitiveTypeprüfen oder den Aufruf intry/catcheinschließen. - Relative Einheiten wie
emoder%können bei spezifizierten Werten (element.style) oft nicht in absolute Einheiten umgerechnet werden. Bei berechneten Werten liefert der Browser in der Regel bereitspx.