CSSMathSum.values — Eigenschaft · JavaScript-Referenz

Signatur

CSSMathSum.values

Beschreibung

Die Eigenschaft values gehört zur Schnittstelle CSSMathSum aus dem CSS Typed Object Model (Houdini). Ein CSSMathSum ist die objektorientierte Darstellung einer Addition in calc(), zum Beispiel calc(100% - 20px). Über values kommst du an die einzelnen Summanden dieses Ausdrucks.

Du bekommst ein CSSNumericArray. Es ist iterierbar, hat eine length-Eigenschaft und lässt sich per Index lesen, zum Beispiel mit values[0]. Die Einträge sind CSSNumericValue-Objekte, meist CSSUnitValue. Sie können aber auch verschachtelte Rechenausdrücke sein, etwa CSSMathProduct oder CSSMathNegate. Eine Subtraktion wird immer als Summe mit einem negierten Summanden (CSSMathNegate) dargestellt.

Typische Einsatzfälle sind das Auswerten von calc()-Ausdrücken, die du aus attributeStyleMap oder computedStyleMap() gelesen hast. Weitere Fälle sind Werkzeuge zum Debuggen von Stilen und das Umbauen von Ausdrücken, ohne selbst Zeichenketten zu zerlegen.

Rückgabewert

Typ

CSSNumericArray

Beschreibung

Eine schreibgeschützte, iterierbare Liste von CSSNumericValue-Objekten. Das sind die Summanden der Summe in der Reihenfolge, in der sie im Ausdruck stehen.

Beispiele

Summanden eines selbst erzeugten CSSMathSum auslesen

// Unterschiedliche Einheiten können nicht zusammengefasst werden → CSSMathSum
const summe = new CSSMathSum(CSS.px(10), CSS.percent(50), CSS.em(2));

console.log(summe.toString());
console.log(summe.values.length);

for (const teil of summe.values) {
  console.log(teil.value, teil.unit);
}

calc(10px + 50% + 2em) 3 10 "px" 50 "percent" 2 "em"

Ergebnis von add() untersuchen

// Gleiche Einheiten werden direkt verrechnet
const einfach = CSS.px(10).add(CSS.px(5));
console.log(einfach.constructor.name, einfach.toString());

// Gemischte Einheiten ergeben einen CSSMathSum
const gemischt = CSS.px(10).add(CSS.percent(5));
console.log(gemischt.constructor.name);
console.log(gemischt.values[0].toString(), gemischt.values[1].toString());

CSSUnitValue 15px CSSMathSum 10px 5%

calc()-Ausdruck aus einem Element zerlegen

const box = document.querySelector('.box');
box.attributeStyleMap.set('width', 'calc(100% - 20px)');

const breite = box.attributeStyleMap.get('width');

if (breite instanceof CSSMathSum) {
  const teile = [...breite.values].map((v) =>
    v instanceof CSSMathNegate
      ? `minus ${v.value.toString()}`
      : v.toString()
  );
  console.log(teile);
}

["100%", "minus 20px"]

// Wichtig · Fallstricke

Browser-Unterstützung: Das CSS Typed OM gibt es in Chromium-Browsern (Chrome und Edge ab Version 66 bzw. 79) und in Safari ab 16.4. Firefox unterstützt es nicht. Prüfe die Verfügbarkeit vorher, z. B. mit 'CSSMathSum' in window.
Subtraktion: Es gibt keine eigene Differenz-Klasse. Aus a - b wird ein CSSMathSum mit den Summanden a und CSSMathNegate(b). Beim Durchlaufen musst du deshalb mit verschachtelten Typen rechnen, statt nur CSSUnitValue zu erwarten.
Schreibschutz: Die Eigenschaft values selbst kannst du nicht neu setzen, und das CSSNumericArray hat keine Methoden wie push(). Willst du einen geänderten Ausdruck, erzeuge einen neuen, z. B. mit new CSSMathSum(...) oder add(). Um Array-Methoden wie map() zu nutzen, wandle die Liste vorher um, z. B. mit [...summe.values].
Zusammenfassen: Ob du einen CSSMathSum oder einen einfachen CSSUnitValue bekommst, hängt davon ab, ob sich die Einheiten verrechnen lassen. Prüfe den Typ deshalb immer mit instanceof.
computedStyleMap(): Berechnete Werte werden teilweise schon aufgelöst, etwa zu reinen px-Werten. Den ursprünglichen calc()-Ausdruck bekommst du zuverlässiger über attributeStyleMap.

Siehe auch

CSSMathMax.values CSSMathMin.values CSSMathClamp.value CSSMathProduct.values CSSMathInvert.value