CSSMathNegate.value — Eigenschaft · JavaScript-Referenz

Signatur

CSSMathNegate.value

Beschreibung

Die Eigenschaft value gehört zum CSS Typed Object Model (CSS Typed OM). Ein CSSMathNegate-Objekt steht für die Negation eines numerischen CSS-Werts, also für einen Ausdruck wie calc(-(100% - 20px)). Über value liest du den inneren Wert aus, der negiert wird. Das Vorzeichen ist darin noch nicht angewendet.

Gebraucht wird die Eigenschaft vor allem, wenn du mathematische CSS-Ausdrücke als Baum durchläufst: zum Beispiel um calc()-Werte zu analysieren, umzuformen, auszuwerten oder zu Debug-Zwecken lesbar auszugeben. Der Rückgabewert ist immer ein CSSNumericValue. Das kann ein einfacher CSSUnitValue sein oder ein weiterer Rechenausdruck wie CSSMathSum, CSSMathProduct oder CSSMathNegate.

Die Eigenschaft kann nur gelesen werden. Wenn du den negierten Wert ändern willst, musst du ein neues CSSMathNegate-Objekt erzeugen, zum Beispiel mit new CSSMathNegate(neuerWert) oder mit CSSNumericValue.prototype.negate().

Rückgabewert

Typ

CSSNumericValue

Beschreibung

Der Ausdruck, der negiert wird, z. B. ein CSSUnitValue oder ein verschachtelter CSSMathValue. Wurde dem Konstruktor eine Zahl übergeben, ist das ein CSSUnitValue mit der Einheit "number".

Beispiele

Negation erzeugen und inneren Wert auslesen

// Einen Längenwert negieren
const neg = new CSSMathNegate(CSS.px(10));

console.log(neg.value instanceof CSSUnitValue);
console.log(neg.value.value, neg.value.unit);
console.log(neg.toString());

true 10 "px" calc(-10px)

negate() auf einem zusammengesetzten Ausdruck

// 100% - 20px als Summe
const sum = new CSSMathSum(CSS.percent(100), CSS.px(-20));

// negate() auf einem CSSMathSum liefert ein CSSMathNegate
const neg = sum.negate();

console.log(neg instanceof CSSMathNegate);
console.log(neg.value instanceof CSSMathSum);
console.log(neg.value.toString());

true true calc(100% + -20px)

Rechenbaum rekursiv als Text ausgeben

const describe = (node) => {
  if (node instanceof CSSUnitValue) return `${node.value}${node.unit === 'number' ? '' : node.unit}`;
  if (node instanceof CSSMathNegate) return `-(${describe(node.value)})`;
  if (node instanceof CSSMathSum) return [...node.values].map(describe).join(' + ');
  if (node instanceof CSSMathProduct) return [...node.values].map(describe).join(' * ');
  return node.toString();
};

const expr = new CSSMathNegate(
  new CSSMathSum(CSS.vw(50), CSS.px(8))
);

console.log(describe(expr));

-(50vw + 8px)

// Wichtig · Fallstricke

Browser-Unterstützung: CSS Typed OM gibt es in Chromium-Browsern ab Version 66 und in Safari ab 16.4. Firefox unterstützt CSSMathNegate derzeit nicht. Prüfe deshalb vorher, ob die API vorhanden ist, etwa mit if ('CSSMathNegate' in window).
value enthält den nicht negierten Wert. Bei calc(-10px) liefert value also 10px und nicht -10px.
Auf einem CSSUnitValue erzeugt negate() kein CSSMathNegate, sondern direkt einen neuen CSSUnitValue mit umgekehrtem Vorzeichen (CSS.px(10).negate() ergibt -10px). Ruft man negate() auf einem CSSMathNegate auf, bekommt man dessen value zurück.
Auch Werte aus CSSNumericValue.parse() oder computedStyleMap() werden oft schon vereinfacht. Deshalb bekommst du dort nicht zwingend ein CSSMathNegate, selbst wenn im Quelltext ein Minus steht.
Die Eigenschaft kann nur gelesen werden. Eine Zuweisung wird ignoriert und wirft im Strict Mode einen TypeError.

Siehe auch

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