CSSMathNegate — Schnittstelle · JavaScript-Referenz

Signatur

interface CSSMathNegate extends CSSMathValue

Beschreibung

CSSMathNegate gehört zur CSS Typed Object Model API (Typed OM). Die Schnittstelle stellt die Operation „Vorzeichen umkehren“ innerhalb eines calc()-Ausdrucks als Objekt dar. Sie erbt von CSSMathValue und damit von CSSNumericValue. Deshalb stehen auch Methoden wie add(), mul(), to() oder equals() zur Verfügung.

Solche Objekte entstehen meist automatisch, zum Beispiel wenn Sie mit CSSNumericValue.prototype.sub() subtrahieren: Intern ist a - b eine Summe aus a und der Negation von b, also CSSMathSum(a, CSSMathNegate(b)). Beim Auslesen berechneter Stile über computedStyleMap() bzw. attributeStyleMap können Sie deshalb auf CSSMathNegate-Knoten stoßen, wenn Sie den Ausdrucksbaum durchlaufen.

Sie können auch selbst eine Instanz mit new CSSMathNegate(wert) erzeugen und sie direkt einer CSS-Eigenschaft zuweisen. Die wichtigsten Eigenschaften sind:

value (nur lesbar): der negierte CSSNumericValue, also der Operand.
operator (geerbt, nur lesbar): hat immer den Wert "negate".

Wenn Sie eine CSSMathNegate-Instanz in einen String umwandeln, entsteht gültige CSS-Syntax, zum Beispiel calc(-5px).

Parameter

Name	Typ	Default	Beschreibung
$arg Pflicht	CSSNumericValue \| number		Konstruktor-Argument von `new CSSMathNegate(arg)`: der Wert, dessen Vorzeichen umgekehrt wird. Eine einfache Zahl wird wie `CSS.number(n)` behandelt.

Rückgabewert

Typ

CSSMathNegate

Beschreibung

Der Konstruktor gibt ein neues CSSMathNegate-Objekt zurück. Dessen Eigenschaft value enthält den Operanden, operator ist immer "negate".

Beispiele

Instanz erzeugen und Eigenschaften lesen

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

console.log(neg.operator);          // Operator des Ausdrucks
console.log(neg.value.toString());  // Operand
console.log(neg.toString());        // CSS-Serialisierung

negate 5px calc(-5px)

Negativen Außenabstand per Typed OM setzen

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

// -(10px + 2em) als Ausdrucksbaum
const offset = new CSSMathNegate(
  new CSSMathSum(CSS.px(10), CSS.em(2))
);

box.attributeStyleMap.set('margin-left', offset);
console.log(box.style.marginLeft);

calc(-(10px + 2em))

sub() erzeugt intern eine CSSMathNegate

const diff = CSS.percent(100).sub(CSS.px(20));

console.log(diff.constructor.name);           // CSSMathSum
const [first, second] = diff.values;
console.log(first.toString());                 // 100%
console.log(second instanceof CSSMathNegate);  // true
console.log(second.value.toString());          // 20px
console.log(diff.toString());

CSSMathSum 100% true 20px calc(100% - 20px)

Ausdrucksbaum rekursiv auswerten

// Wandelt einen reinen px-Ausdrucksbaum in eine Zahl um
const evalPx = (v) => {
  if (v instanceof CSSUnitValue) return v.to('px').value;
  if (v instanceof CSSMathNegate) return -evalPx(v.value);
  if (v instanceof CSSMathSum) {
    return [...v.values].reduce((s, x) => s + evalPx(x), 0);
  }
  throw new TypeError(`Nicht unterstützt: ${v.operator}`);
};

const expr = CSS.px(50).sub(CSS.px(8)).sub(CSS.px(2));
console.log(evalPx(expr));

40

// Wichtig · Fallstricke

Browser-Unterstützung: Das CSS Typed OM gibt es in Chromium-Browsern ab Version 66 und in Safari ab 16.4. Firefox unterstützt es nicht. Prüfen Sie die Unterstützung deshalb vorher, z. B. mit if ('CSSMathNegate' in window), und sehen Sie einen Rückfall auf String-Werte über element.style vor.
CSSNumericValue.prototype.negate() gibt nicht immer eine CSSMathNegate zurück: Bei einem CSSUnitValue entsteht direkt ein neuer Einheitswert, z. B. wird CSS.px(5).negate() zu -5px. Wenden Sie negate() auf eine CSSMathNegate an, erhalten Sie deren value zurück, also keine doppelte Negation.
Die Eigenschaft value ist nur lesbar. Um den Operanden zu ändern, erzeugen Sie eine neue Instanz.
Der Ausdruck wird nicht vereinfacht, solange Sie nicht to() oder toSum() aufrufen. Die Serialisierung kann deshalb verschachtelte Klammern enthalten, etwa calc(-(10px + 2em)).
Die Typen müssen verträglich sein: Weisen Sie einen negierten Ausdruck einer Eigenschaft mit unpassendem Typ zu, wirft attributeStyleMap.set() einen TypeError.

Siehe auch

CSSMathClamp CSSMathInvert CSSMathMax CSSMathValue CSSMathMin