CSSMathValue.operator — Eigenschaft · JavaScript-Referenz

Signatur

readonly CSSMathValue.operator

Beschreibung

Die Eigenschaft operator gehört zur abstrakten Schnittstelle CSSMathValue aus dem CSS Typed Object Model. Alle konkreten Unterklassen, also CSSMathSum, CSSMathProduct, CSSMathNegate, CSSMathInvert, CSSMathMin, CSSMathMax und CSSMathClamp, erben sie. Der Wert ist eine feste Zeichenkette aus dem Aufzählungstyp CSSMathOperator:

"sum" – CSSMathSum (Addition, auch Subtraktion)
"product" – CSSMathProduct (Multiplikation, auch Division)
"negate" – CSSMathNegate (Vorzeichenwechsel)
"invert" – CSSMathInvert (Kehrwert, 1/x)
"min" – CSSMathMin (min())
"max" – CSSMathMax (max())
"clamp" – CSSMathClamp (clamp())

Nützlich ist operator vor allem, wenn du einen Ausdrucksbaum aus calc(), min(), max() oder clamp() auswertest, umschreibst oder analysierst, zum Beispiel für einen eigenen Serialisierer, einen Style-Inspector oder Animationslogik. Du kannst dann mit einem einfachen switch über die Operation verzweigen und brauchst keine instanceof-Kette.

Beachte, dass das Typed OM keine eigenen Operatoren für Subtraktion und Division kennt. a - b wird als "sum" mit einem CSSMathNegate-Summanden abgebildet, a / b als "product" mit einem CSSMathInvert-Faktor.

Rückgabewert

Typ

"sum" | "product" | "negate" | "invert" | "min" | "max" | "clamp"

Beschreibung

Ein Wert des Aufzählungstyps CSSMathOperator, der zur konkreten Unterklasse passt. Die Eigenschaft ist nur lesbar.

Beispiele

Operator verschiedener Math-Objekte abfragen

const summe = CSS.px(10).add(CSS.percent(5));
const negiert = new CSSMathNegate(CSS.px(5));
const maximum = new CSSMathMax(CSS.px(200), CSS.vw(30));
const kehrwert = new CSSMathInvert(CSS.number(4));

console.log(summe.operator);
console.log(negiert.operator);
console.log(maximum.operator);
console.log(kehrwert.operator);
console.log(String(summe));

sum negate max invert calc(10px + 5%)

calc()-Ausdruck aus dem Inline-Style analysieren

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

const breite = box.attributeStyleMap.get('width');
console.log(breite.constructor.name, breite.operator);

// Subtraktion = Summe mit negiertem Summanden
for (const teil of breite.values) {
  console.log(teil.operator ?? `${teil.value}${teil.unit}`);
}

CSSMathSum sum 100percent negate

Ausdrucksbaum rekursiv in lesbaren Text umwandeln

const beschreibe = (wert) => {
  if (wert instanceof CSSUnitValue) return `${wert.value}${wert.unit}`;

  switch (wert.operator) {
    case 'sum':
      return `(${[...wert.values].map(beschreibe).join(' + ')})`;
    case 'product':
      return `(${[...wert.values].map(beschreibe).join(' * ')})`;
    case 'negate':
      return `-${beschreibe(wert.value)}`;
    case 'invert':
      return `1/${beschreibe(wert.value)}`;
    case 'min':
    case 'max':
      return `${wert.operator}(${[...wert.values].map(beschreibe).join(', ')})`;
    case 'clamp':
      return `clamp(${[wert.lower, wert.value, wert.upper].map(beschreibe).join(', ')})`;
    default:
      return String(wert);
  }
};

const ausdruck = CSSNumericValue.parse('min(50vw, calc(300px - 2em))');
console.log(beschreibe(ausdruck));

min(50vw, (300px + -2em))

// Wichtig · Fallstricke

Browser-Kompatibilität: CSS Typed OM wird von Chromium-Browsern (ab Chrome 66) und Safari (ab 16.4) unterstützt, von Firefox bisher nicht. Prüfe die Unterstützung mit 'CSSMathValue' in window bzw. typeof CSS?.px === 'function'.
CSSMathClamp und damit der Wert "clamp" ist nicht überall verfügbar. Ein default-Zweig im switch ist deshalb sinnvoll.
Es gibt keine Operatoren wie "subtract" oder "divide". Subtraktion erscheint als "sum" plus "negate", Division als "product" plus "invert".
Einfache Rechnungen werden sofort vereinfacht: CSS.px(10).add(CSS.px(5)) ergibt eine CSSUnitValue (15px) und kein CSSMathValue. Dort ist operator dann undefined.
Die Eigenschaft ist nur lesbar. Zuweisungen werden ignoriert und lösen im Strict Mode einen TypeError aus.
computedStyleMap() liefert oft schon ausgerechnete Werte (etwa px). Math-Objekte bekommst du zuverlässiger über attributeStyleMap oder CSSNumericValue.parse().

Siehe auch

CSSMathValue CSSMathSum CSSMathProduct CSSMathNegate CSSMathInvert CSSMathMin CSSMathMax CSSNumericValue.parse()