Signatur
Beschreibung
Die Methode setFloatValue() gehört zur alten Schnittstelle CSSPrimitiveValue aus der Spezifikation DOM Level 2 Style. Damit ließ sich einer CSS-Eigenschaft eine Zahl mit Einheit zuweisen. Die Einheit gibt man als numerische Konstante an, etwa CSSPrimitiveValue.CSS_PX oder CSSPrimitiveValue.CSS_EMS. Das CSSPrimitiveValue-Objekt bekam man über CSSStyleDeclaration.getPropertyCSSValue().
Die Idee war, Stilwerte typisiert und ohne Zeichenketten-Verarbeitung zu ändern. In der Praxis hat das nie zuverlässig funktioniert. Werte aus getComputedStyle() waren schreibgeschützt, und bei Inline-Stilen setzten viele Engines die Methode nie vollständig um. Beide Fälle lösten deshalb meist eine DOMException aus.
Für neuen Code solltest du nicht auf setFloatValue() setzen. Es gibt zwei moderne Wege:
- CSS Typed OM:
element.attributeStyleMap.set('width', CSS.px(200))ist der direkte, typisierte Nachfolger. - Zeichenketten:
element.style.setProperty('width', '200px')funktioniert überall.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $unitType Pflicht | number | Einheit als Konstante von CSSPrimitiveValue, z. B. CSS_NUMBER (1), CSS_PERCENTAGE (2), CSS_EMS (3), CSS_EXS (4), CSS_PX (5), CSS_CM (6), CSS_MM (7), CSS_IN (8), CSS_PT (9), CSS_PC (10), CSS_DEG (11), CSS_RAD (12), CSS_GRAD (13), CSS_MS (14), CSS_S (15), CSS_HZ (16), CSS_KHZ (17) oder CSS_DIMENSION (18). |
|
| $floatValue Pflicht | number | Der neue Zahlenwert in der angegebenen Einheit. |
Rückgabewert
undefined). Bei einem Fehler wird eine DOMException ausgelöst.Beispiele
Historische Nutzung mit Funktionsprüfung
const box = document.createElement('div');
box.style.width = '100px';
document.body.append(box);
const decl = box.style;
if (typeof decl.getPropertyCSSValue === 'function' && typeof CSSPrimitiveValue !== 'undefined') {
try {
const value = decl.getPropertyCSSValue('width');
// Breite auf 250px setzen (alte DOM-Level-2-API)
value.setFloatValue(CSSPrimitiveValue.CSS_PX, 250);
console.log('Neue Breite:', box.style.width);
} catch (err) {
console.log('Fehler:', err.name);
}
} else {
console.log('CSSPrimitiveValue wird nicht unterstützt');
}Moderner Ersatz: CSS Typed OM
const box = document.createElement('div');
document.body.append(box);
if ('attributeStyleMap' in box) {
box.attributeStyleMap.set('width', CSS.px(250));
box.attributeStyleMap.set('font-size', CSS.em(1.5));
console.log(box.attributeStyleMap.get('width').toString());
} else {
// Rückfall für Browser ohne Typed OM
box.style.setProperty('width', '250px');
console.log(box.style.width);
}Hilfsfunktion als Polyfill-Ersatz
// Bildet die alten Einheiten-Konstanten auf CSS-Einheiten ab
const UNITS = { 1: '', 2: '%', 3: 'em', 4: 'ex', 5: 'px', 6: 'cm', 7: 'mm', 8: 'in', 9: 'pt', 10: 'pc', 11: 'deg', 12: 'rad', 13: 'grad', 14: 'ms', 15: 's', 16: 'Hz', 17: 'kHz' };
const setFloatValue = (el, prop, unitType, floatValue) => {
const unit = UNITS[unitType];
if (unit === undefined) throw new RangeError(`Unbekannter unitType: ${unitType}`);
el.style.setProperty(prop, `${floatValue}${unit}`);
};
const el = document.createElement('p');
setFloatValue(el, 'margin-top', 3, 2.5); // 3 = CSS_EMS
console.log(el.style.marginTop);// Wichtig · Fallstricke
Veraltet und entfernt: CSSValue, CSSPrimitiveValue und getPropertyCSSValue() sind nicht mehr Teil der aktuellen CSSOM-Spezifikation. Firefox hat sie mit Version 62 entfernt, Chromium-Browser deutlich früher. In aktuellen Browsern existiert die Methode nicht mehr.
INVALID_ACCESS_ERR: Wird ausgelöst, wenn der Wert keine Zahl ist (z. B. ein Farb- oder Schlüsselwort-Wert) oder die Einheit nicht zur Eigenschaft passt.NO_MODIFICATION_ALLOWED_ERR: Wird ausgelöst, wenn der Wert schreibgeschützt ist. Das gilt immer für Werte ausgetComputedStyle().- Die Konstante
CSS_DIMENSIONsteht für eine unbekannte Einheit und lässt sich nicht sinnvoll in CSS-Text umwandeln. - Verwende stattdessen das CSS Typed OM (
attributeStyleMap,CSS.px()usw.; in Chromium-Browsern und Safari 16.4+ verfügbar) oderstyle.setProperty().