CSSNumericValue.div() — Methode · JavaScript-Referenz

Signatur

CSSNumericValue.prototype.div(...values)

Beschreibung

Mit div() teilen Sie einen Wert aus dem CSS Typed Object Model durch andere Werte, ohne Zeichenketten zusammensetzen oder parsen zu müssen. Der Ausgangswert bleibt dabei unverändert. Sie erhalten immer ein neues Objekt zurück.

Übergeben Sie reine Zahlen (etwa CSS.px(300).div(2)), vereinfacht der Browser das Ergebnis sofort zu einem CSSUnitValue (hier 150px). Lässt sich die Division nicht direkt ausrechnen, zum Beispiel beim Teilen durch einen Wert mit Einheit (CSS.px(10).div(CSS.px(2))), entsteht ein CSSMathProduct mit einem CSSMathInvert. Dieser Ausdruck wird als calc() ausgegeben.

Typische Einsatzfälle sind Berechnungen in JavaScript-gesteuerten Layouts und Animationen oder in CSS Houdini (Paint Worklets, Layout Worklets). Dort liest man Werte über computedStyleMap() aus, rechnet mit ihnen und schreibt sie typsicher über attributeStyleMap.set() zurück.

Parameter

Name	Typ	Default	Beschreibung
$...values Pflicht	number \| CSSNumericValue		Ein oder mehrere Teiler. Reine Zahlen werden intern als `CSS.number(n)` behandelt. Nacheinander wird durch jeden Wert geteilt: `a.div(b, c)` entspricht `a / b / c`.

Rückgabewert

Typ

CSSNumericValue

Beschreibung

Einen neuen CSSNumericValue. Wenn das Ergebnis direkt ausgerechnet werden kann, ist es ein CSSUnitValue, sonst ein CSSMathProduct.

Beispiele

Einfache Division durch eine Zahl

const breite = CSS.px(300);
const haelfte = breite.div(2);

console.log(haelfte.value, haelfte.unit);
console.log(haelfte.toString());
console.log(breite.toString()); // Original bleibt unverändert

150 "px" 150px 300px

Mehrere Teiler nacheinander

const spalte = CSS.vw(90).div(3, 2); // 90 / 3 / 2
console.log(spalte.toString());

15vw

Berechnete Breite eines Elements halbieren

const box = document.querySelector('.box');
const breite = box.computedStyleMap().get('width'); // z. B. CSSUnitValue 400px

box.attributeStyleMap.set('width', breite.div(2));
console.log(box.attributeStyleMap.get('width').toString());

200px

Division durch Werte mit Einheit und durch 0

const ergebnis = CSS.px(10).div(CSS.px(2));
console.log(ergebnis instanceof CSSMathProduct);
console.log(ergebnis.toString());

try {
  CSS.px(10).div(0);
} catch (err) {
  console.log(err.name);
}

true calc(10px / 2px) RangeError

// Wichtig · Fallstricke

Division durch 0: Ist ein Teiler der Zahlenwert 0 (ohne Einheit), wirft div() einen RangeError.
Ungültige Argumente: Zeichenketten wie '2px' werden nicht akzeptiert und lösen einen TypeError aus. Nutzen Sie stattdessen CSS.px(2) oder CSSNumericValue.parse('2px').
Ergebnistyp prüfen: Nicht jedes Ergebnis ist ein CSSUnitValue. Nur dieser Typ hat die Eigenschaften .value und .unit. Prüfen Sie den Typ vorher mit instanceof CSSUnitValue.
Keine Umrechnung: div() rechnet keine Einheiten um. Soll eine bestimmte Einheit herauskommen, nutzen Sie danach to() bzw. toSum(). Das funktioniert nur bei kompatiblen Einheiten.
Browser-Unterstützung: CSS Typed OM gibt es in Chromium-Browsern (ab Version 66) und in Safari ab 16.4, aber nicht in Firefox. Prüfen Sie die Unterstützung vorher, z. B. mit if ('CSSNumericValue' in window).

Siehe auch

CSSNumericValue.min() CSSNumericValue.add() CSSNumericValue.max() CSSNumericValue.mul() CSSNumericValue.sub()