new CSSMathInvert() — Methode · JavaScript-Referenz

Signatur

new CSSMathInvert(arg)

Beschreibung

Der Konstruktor CSSMathInvert() gehört zum CSS Typed Object Model (Houdini) und erzeugt einen mathematischen Ausdruck, der den Kehrwert eines Werts beschreibt, also 1 / wert. Das Ergebnis ist ein CSSMathValue mit dem operator "invert". Den umschlossenen Wert liest man über die Eigenschaft value aus.

Allein eingesetzt ist CSSMathInvert selten nützlich, weil der Kehrwert einer Länge wie 5px den Typ Länge^-1 hat. So ein Wert ist für keine CSS-Eigenschaft gültig. Seine eigentliche Aufgabe ist es, innerhalb von CSSMathProduct eine Division darzustellen: calc(100px / 3) wird intern als Produkt aus 100px und CSSMathInvert(3) abgebildet.

Diese Objekte legt man vor allem dann an, wenn man calc()-Ausdrücke Stück für Stück und typsicher aufbauen möchte, statt Zeichenketten zusammenzusetzen. Dasselbe gilt, wenn man Ausdrücke auswertet, die CSSNumericValue.parse() oder element.computedStyleMap() liefern. Oft ist die Methode CSSNumericValue.prototype.div() einfacher. Sie vereinfacht allerdings sofort, wenn das möglich ist, und liefert dann zum Beispiel direkt einen CSSUnitValue.

Parameter

Name	Typ	Default	Beschreibung
$arg Pflicht	number \| CSSNumericValue		Der Wert, dessen Kehrwert dargestellt werden soll. Eine einfache Zahl wird automatisch in einen einheitenlosen `CSSUnitValue` (Einheit `"number"`) umgewandelt.

Rückgabewert

Typ

CSSMathInvert

Beschreibung

Ein neues CSSMathInvert-Objekt. operator ist "invert", value enthält den übergebenen Wert als CSSNumericValue.

Beispiele

Kehrwert erzeugen und untersuchen

const inv = new CSSMathInvert(CSS.px(5));

console.log(inv.operator);        // Art der Operation
console.log(inv.value.toString()); // umschlossener Wert
console.log(inv.toString());       // Serialisierung als CSS

invert 5px calc(1 / 5px)

Division in einem calc()-Ausdruck für eine Breite

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

// entspricht calc(100% / 3), ohne Zeichenketten zusammenzusetzen
const drittel = new CSSMathProduct(CSS.percent(100), new CSSMathInvert(3));

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

calc(100% / 3)

Geparste Ausdrücke auswerten

const expr = CSSNumericValue.parse('calc(20px / 4em)');

// Division steckt als CSSMathInvert in einem CSSMathProduct
for (const teil of expr.values) {
  if (teil instanceof CSSMathInvert) {
    console.log('Teiler:', teil.value.toString());
  } else {
    console.log('Faktor:', teil.toString());
  }
}

Faktor: 20px Teiler: 4em

Feature-Erkennung vor der Nutzung

const unterstuetzt = typeof CSSMathInvert === 'function' && 'attributeStyleMap' in HTMLElement.prototype;

if (unterstuetzt) {
  console.log(new CSSMathInvert(2).toString());
} else {
  console.log('CSS Typed OM nicht verfügbar – Fallback über style.setProperty()');
}

calc(1 / 2)

// Wichtig · Fallstricke

Browser-Kompatibilität: Das CSS Typed OM steht in Chromium-Browsern (Chrome, Edge, Opera) und ab Safari 16.4 zur Verfügung. Firefox unterstützt es nicht. Prüfe deshalb vor der Nutzung, ob die API vorhanden ist, und halte einen Fallback über element.style.setProperty() bereit.
Typ beachten: Der Kehrwert einer Länge hat den Typ Länge^-1. Ein alleinstehender CSSMathInvert(CSS.px(5)) ist für Eigenschaften wie width ungültig, und attributeStyleMap.set() wirft dann einen TypeError. Nutze ihn deshalb nur innerhalb eines CSSMathProduct.
Keine Vereinfachung: Der Konstruktor rechnet nicht. new CSSMathInvert(4) bleibt calc(1 / 4). Wenn du ein vereinfachtes Ergebnis brauchst, ist CSS.px(100).div(4) die bessere Wahl (ergibt 25px).
Division durch 0: Ein Kehrwert von 0 wird ohne Fehler erzeugt. Ergebnisse wie „unendlich“ zeigen sich erst später beim Auswerten oder Umrechnen, zum Beispiel mit to().
Zeichenketten wie '5px' werden nicht akzeptiert. Nutze stattdessen CSS.px(5) oder CSSNumericValue.parse().

Siehe auch

new CSSMathMin() new CSSMathNegate() new CSSMathClamp() new CSSMathMax() new CSSMathProduct()