CSSMathInvert — Schnittstelle · JavaScript-Referenz

Signatur

interface CSSMathInvert extends CSSMathValue

Beschreibung

CSSMathInvert gehört zur CSS Typed Object Model API (Houdini) und steht für den Kehrwert eines CSSNumericValue. Das Objekt entspricht dem Ausdruck calc(1 / x). Es erbt von CSSMathValue und damit auch von CSSNumericValue bzw. CSSStyleValue. Methoden wie add(), mul(), to() und type() stehen also zur Verfügung.

Meistens erzeugen Sie CSSMathInvert nicht direkt. Die Engine legt es intern an, sobald ein Wert mit div() geteilt wird und sich das Ergebnis nicht zu einem einfachen CSSUnitValue vereinfachen lässt. Dann entsteht ein CSSMathProduct, dessen Divisoren als CSSMathInvert hinterlegt sind. Bei der Serialisierung erscheint daraus wieder ein lesbarer Ausdruck wie calc(100px / 2).

Wichtige Mitglieder:

new CSSMathInvert(arg): Konstruktor. Er nimmt eine Zahl oder einen CSSNumericValue entgegen.
value (nur lesbar): der ursprüngliche, nicht invertierte CSSNumericValue.
operator (geerbt, nur lesbar): immer "invert".

Beim Invertieren wird auch der Typ invertiert. Aus einer Länge ({length: 1}) wird {length: -1}. Deshalb lässt sich ein CSSMathInvert allein selten einer CSS-Eigenschaft zuweisen. Sinnvoll ist es vor allem als Teil eines CSSMathProduct.

Parameter

Name	Typ	Default	Beschreibung
$arg Pflicht	number \| CSSNumericValue		Der Wert, dessen Kehrwert dargestellt wird. Eine einfache Zahl wird intern in `CSS.number(arg)` umgewandelt.

Rückgabewert

Typ

CSSMathInvert

Beschreibung

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

Beispiele

Instanz erzeugen und Eigenschaften lesen

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

console.log(inv.operator);        // Art der Operation
console.log(inv.value.toString()); // ursprünglicher Wert
console.log(inv.toString());       // Serialisierung
console.log(inv.type());           // invertierter Typ

invert 5px calc(1 / 5px) { length: -1 }

Division im Style setzen: calc(100px / 2)

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

// 100px geteilt durch 2, ausgedrückt als Produkt mit Kehrwert
const width = new CSSMathProduct(CSS.px(100), new CSSMathInvert(2));

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

calc(100px / 2)

CSSMathInvert entsteht automatisch durch div()

const result = CSS.vw(100).div(CSS.number(3).add(CSS.number(1)));

if (result instanceof CSSMathProduct) {
  for (const part of result.values) {
    if (part instanceof CSSMathInvert) {
      console.log('Divisor:', part.value.toString());
    }
  }
}
console.log(result.toString());

Divisor: 4 calc(100vw / 4)

// Wichtig · Fallstricke

Browser-Unterstützung: Die CSS Typed OM API steht in Chromium-Browsern (Chrome und Edge ab Version 66) und in Safari ab 16.4 zur Verfügung. Firefox unterstützt sie nicht. Prüfen Sie vor der Nutzung, ob 'CSSMathInvert' in window bzw. window.CSS?.number vorhanden ist.
Typ-Invertierung: new CSSMathInvert(CSS.px(5)) hat den Typ {length: -1}. Wenn Sie so einen Wert direkt einer Eigenschaft wie width zuweisen, wirft der Browser einen TypeError. Kombinieren Sie den Wert daher mit einem passenden Faktor in einem CSSMathProduct.
Division durch null: Laut Spezifikation soll der Konstruktor bei 0 einen RangeError werfen. Verlassen Sie sich nicht darauf, sondern prüfen Sie Divisoren vorher selbst.
Die genaue Ausgabe von toString() kann sich zwischen den Browsern leicht unterscheiden, etwa bei Leerzeichen oder Klammern.
Es gibt keine Methode invert() an CSSNumericValue. Einen Kehrwert erzeugen Sie entweder mit dem Konstruktor oder indirekt über div().

Siehe auch

CSSMathMin CSSMathNegate CSSMathClamp CSSMathMax CSSMathProduct