new CSSMathSum() — Methode · JavaScript-Referenz

Signatur

new CSSMathSum(...values)

Beschreibung

Der Konstruktor CSSMathSum() gehört zur CSS Typed Object Model API (Houdini). Er erzeugt ein Objekt vom Typ CSSMathSum, das eine Addition mehrerer numerischer CSS-Werte darstellt. Beim Serialisieren wird daraus ein calc()-Ausdruck, z. B. calc(10px + 50%).

Sinnvoll ist das, wenn du Längen mit unterschiedlichen Einheiten per JavaScript zusammensetzen willst, ohne Strings zusammenzubauen und selbst zu parsen. Das Ergebnis lässt sich direkt über element.attributeStyleMap.set() zuweisen. Die einzelnen Summanden stehen danach über die schreibgeschützte Eigenschaft values (ein CSSNumericArray) zur Verfügung.

Alle Argumente müssen typkompatibel sein: Längen lassen sich mit Längen und Prozentwerten addieren, aber nicht mit Zeiten oder reinen Zahlen. Eine Subtraktion stellst du dar, indem du einen Summanden in CSSMathNegate einpackst. Häufig bekommst du ein CSSMathSum auch automatisch, etwa über CSS.px(10).add(CSS.percent(50)).

Parameter

Name	Typ	Default	Beschreibung
$...values Pflicht	number \| CSSNumericValue		Ein oder mehrere Summanden. Reine Zahlen werden intern in `CSSUnitValue` mit der Einheit `number` umgewandelt. Mindestens ein Wert ist Pflicht.

Rückgabewert

Typ

CSSMathSum

Beschreibung

Ein neues CSSMathSum-Objekt. Seine Summanden stehen in values, und toString() liefert den passenden calc()-Ausdruck.

Beispiele

Summe aus Pixel- und Prozentwert erzeugen

const sum = new CSSMathSum(CSS.px(10), CSS.percent(50));

console.log(sum.toString());
console.log(sum.operator);
console.log(sum.values.length);

calc(10px + 50%) sum 2

Breite eines Elements typisiert setzen

const box = document.querySelector('.box');

// entspricht width: calc(100% - 2rem)
const width = new CSSMathSum(
  CSS.percent(100),
  new CSSMathNegate(CSS.rem(2))
);

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

calc(100% - 2rem)

Summanden auslesen

const sum = new CSSMathSum(CSS.em(1), CSS.px(4), CSS.vw(2));

for (const part of sum.values) {
  console.log(part.value, part.unit);
}

1 em 4 px 2 vw

Fehler bei unverträglichen Typen abfangen

try {
  // Länge + Zeit geht nicht
  new CSSMathSum(CSS.px(10), CSS.s(1));
} catch (err) {
  console.log(err.name);
}

try {
  new CSSMathSum(); // ohne Argumente
} catch (err) {
  console.log(err.name);
}

TypeError SyntaxError

// Wichtig · Fallstricke

Ohne Argumente wirft der Konstruktor einen SyntaxError.
Unverträgliche Typen (z. B. px + s oder px + reine Zahl) führen zu einem TypeError. Achtung: new CSSMathSum(CSS.px(10), 5) schlägt fehl, weil 5 als einheitenlose Zahl behandelt wird.
Der Konstruktor vereinfacht nicht: new CSSMathSum(CSS.px(1), CSS.px(2)) bleibt calc(1px + 2px). CSS.px(1).add(CSS.px(2)) fasst dagegen gleiche Einheiten zu 3px zusammen.
Für eine Subtraktion gibt es keinen eigenen Konstruktor. Nutze CSSMathNegate oder CSSNumericValue.prototype.sub().
Kompatibilität: Die Typed OM wird in Chromium-Browsern (ab 66) und in Safari ab 16.4 unterstützt, in Firefox bisher nicht. Prüfe vorher mit 'CSSMathSum' in window und greife sonst auf String-Werte mit calc() über element.style zurück.

Siehe auch

new CSSMathMax() new CSSMathMin() new CSSMathClamp() new CSSMathInvert() new CSSMathNegate()