CSSMathProduct.values — Eigenschaft · JavaScript-Referenz

Signatur

CSSMathProduct.values

Beschreibung

Die Eigenschaft values der Schnittstelle CSSMathProduct aus dem CSS Typed Object Model gibt ein CSSNumericArray zurück. Es enthält die Operanden, die miteinander multipliziert werden. Ein CSSMathProduct ist die objektorientierte Form eines Ausdrucks wie calc(10px * 2).

Wofür braucht man das? Man kann einen Rechenausdruck in seine Bestandteile zerlegen, zum Beispiel um ihn zu analysieren, umzuschreiben oder für Debug-Zwecke darzustellen. Jeder Eintrag ist selbst ein CSSNumericValue. Das kann ein einfacher CSSUnitValue sein (etwa 10px), aber auch ein verschachtelter Ausdruck wie CSSMathSum oder CSSMathInvert. Eine Division wird intern nämlich als Multiplikation mit dem Kehrwert (CSSMathInvert) dargestellt.

Das zurückgegebene CSSNumericArray ist iterierbar: Es hat eine length-Eigenschaft, einen Indexzugriff (values[0]) und funktioniert mit for...of. Es ist aber kein echtes Array, deshalb fehlen Methoden wie map(). Die Liste ist nur lesbar. Neue Operanden fügt man nicht direkt ein, sondern erzeugt einen neuen Ausdruck, z. B. mit new CSSMathProduct(...) oder CSSNumericValue.prototype.mul().

Rückgabewert

Typ

CSSNumericArray

Beschreibung

Eine schreibgeschützte, iterierbare Liste von CSSNumericValue-Objekten. Das sind die Faktoren des Produkts in der Reihenfolge, in der sie übergeben wurden.

Beispiele

Operanden eines Produkts auslesen

// Produkt aus 10px und 2 erzeugen (entspricht calc(10px * 2))
const product = new CSSMathProduct(CSS.px(10), CSS.number(2));

console.log(product.values.length);
console.log(product.values[0].toString());
console.log(product.values[1].toString());
console.log(product.toString());

2 10px 2 calc(10px * 2)

Über alle Faktoren iterieren

const product = new CSSMathProduct(
  CSS.px(100),
  CSS.number(1.5),
  new CSSMathInvert(CSS.number(4)) // entspricht "/ 4"
);

for (const factor of product.values) {
  // Ein CSSUnitValue hat value und unit, verschachtelte Ausdrücke haben operator
  if (factor instanceof CSSUnitValue) {
    console.log(`Einheitswert: ${factor.value} (${factor.unit})`);
  } else {
    console.log(`Ausdruck: ${factor.operator} -> ${factor.toString()}`);
  }
}

Einheitswert: 100 (px) Einheitswert: 1.5 (number) Ausdruck: invert -> calc(1 / 4)

Produkt rekursiv in lesbaren Text umwandeln

const describe = (value) => {
  if (value instanceof CSSUnitValue) return `${value.value}${value.unit === 'number' ? '' : value.unit}`;
  if (value instanceof CSSMathProduct) {
    // CSSNumericArray ist kein Array, deshalb vorher Array.from()
    return Array.from(value.values, describe).join(' × ');
  }
  if (value instanceof CSSMathInvert) return `1/(${describe(value.value)})`;
  return value.toString();
};

const width = new CSSMathProduct(CSS.vw(50), new CSSMathInvert(CSS.number(3)));
console.log(describe(width));

50vw × 1/(3)

// Wichtig · Fallstricke

Browser-Unterstützung: Das CSS Typed OM gibt es in Chromium-Browsern (Chrome, Edge, Opera) ab Version 66 und in Safari ab 16.4. Firefox unterstützt es derzeit nicht. Vorher prüfen, z. B. mit if ('CSSMathProduct' in window).
Kein echtes Array: CSSNumericArray hat kein map(), filter() usw. Bei Bedarf zuerst mit Array.from(product.values) oder [...product.values] umwandeln.
Schreibgeschützt: Eine Zuweisung an values wird ignoriert (im Strict Mode gibt es einen TypeError). Wer andere Operanden braucht, erzeugt einen neuen CSSMathProduct.
Vereinfachung: CSSNumericValue.prototype.mul() liefert nicht immer einen CSSMathProduct. Lässt sich das Ergebnis direkt ausrechnen (z. B. CSS.px(10).mul(2)), kommt ein CSSUnitValue wie 20px zurück, und der hat keine values-Eigenschaft. Auch Werte aus computedStyleMap() sind meist schon ausgerechnet. Deshalb immer mit instanceof CSSMathProduct prüfen.
Divisionen tauchen in values als CSSMathInvert-Objekte auf, nicht als eigener Operator.

Siehe auch

CSSMathSum.values CSSMathInvert.value CSSMathMax.values CSSMathMin.values CSSMathClamp.value