new CSSMathNegate() — Methode · JavaScript-Referenz

Signatur

new CSSMathNegate(arg)

Beschreibung

Der Konstruktor CSSMathNegate() gehört zum CSS Typed Object Model (Houdini). Er kapselt einen numerischen CSS-Wert und stellt dessen Negation dar, ohne ihn sofort auszurechnen. So lassen sich Ausdrücke wie calc(100% - 20px) strukturiert als Objektbaum aufbauen, statt Strings zusammenzusetzen.

Das ist besonders nützlich, wenn du Werte mit unterschiedlichen Einheiten kombinierst, die sich erst beim Rendern auflösen lassen (z. B. Prozent und Pixel). In Kombination mit CSSMathSum entsteht aus einer Summe mit negiertem Summanden eine Subtraktion.

Das erzeugte Objekt hat die Eigenschaft operator (immer "negate") und value (der negierte CSSNumericValue). Es erbt von CSSMathValue bzw. CSSNumericValue und kann daher mit add(), mul(), to() usw. weiterverarbeitet und über element.attributeStyleMap.set() gesetzt werden.

Parameter

Name	Typ	Default	Beschreibung
$arg Pflicht	number \| CSSNumericValue		Der zu negierende Wert. Eine reine Zahl wird intern in einen `CSSUnitValue` mit der Einheit `"number"` umgewandelt; typischerweise übergibt man z. B. `CSS.px(20)` oder einen anderen `CSSMathValue`.

Rückgabewert

Typ

CSSMathNegate

Beschreibung

Ein neues CSSMathNegate-Objekt mit operator === "negate" und dem übergebenen Wert in value.

Beispiele

Objekt erzeugen und Eigenschaften lesen

const neg = new CSSMathNegate(CSS.px(20));

console.log(neg.operator);          // Art der Operation
console.log(neg.value.toString());  // der ursprüngliche Wert
console.log(neg instanceof CSSNumericValue);

negate 20px true

Subtraktion mit gemischten Einheiten: 100% - 20px

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

// 100% + (-20px) entspricht calc(100% - 20px)
const width = new CSSMathSum(
  CSS.percent(100),
  new CSSMathNegate(CSS.px(20))
);

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

calc(100% - 20px)

Einheitenlosen Wert negieren und Feature-Erkennung

if ('CSSMathNegate' in window) {
  const n = new CSSMathNegate(3);
  console.log(n.value.unit);   // Zahl wurde zu CSSUnitValue
  console.log(n.value.value);
} else {
  // Fallback: klassischer String
  document.body.style.setProperty('--offset', 'calc(-1 * 3)');
}

number 3

// Wichtig · Fallstricke

Keine sofortige Berechnung: CSSMathNegate speichert den Ausdruck, statt ihn auszurechnen. Wer einfach einen negativen Wert braucht, nimmt besser CSS.px(-20) oder CSS.px(20).negate() – Letzteres liefert bei einem CSSUnitValue direkt wieder einen CSSUnitValue und kein CSSMathNegate.
Ein ungültiges Argument (z. B. ein String wie \"20px\") löst einen TypeError aus. Strings vorher mit CSSNumericValue.parse() umwandeln.
Browser-Unterstützung: Das CSS Typed OM gibt es in Chromium-Browsern seit Version 66 und in Safari ab 16.4. Firefox unterstützt es nicht, deshalb vorher mit 'CSSMathNegate' in window prüfen und einen String-Fallback über style.setProperty() vorsehen.
Die genaue Zeichenkette von toString() kann bei verschachtelten Ausdrücken je nach Browser leicht anders aussehen (z. B. zusätzliche Klammern).

Siehe auch

new CSSMathClamp() new CSSMathInvert() new CSSMathMax() new CSSMathMin() new CSSMathSum()