Note: This feature is available in Web Workers.
The CSSMathInvert interface of the CSS Typed Object Model API represents the inverse (reciprocal) of a CSSNumericValue.
CSSMathInvert()Creates a new CSSMathInvert object.
Also inherits properties from its parent interface, CSSMathValue.
CSSMathInvert.value Read onlyReturns a CSSNumericValue object containing the value being inverted.
Also inherits methods from its parent interface, CSSMathValue.
Also inherits methods from its parent interface, CSSMathValue.
When you divide one CSSNumericValue by another using div(), if the divisor is a plain number, it can immediately be scaled into a value of the original type.
If the divisor is a different type, the result can't be resolved to a single object. In this case, the CSS Typed Object Model API represents the divisor as a CSSMathInvert.
Generally you won't construct a CSSMathInvert directly. It's produced when div() is called with a divisor that isn't a plain number: the result is a CSSMathProduct, and CSSMathInvert is the operand holding that divisor — found by walking the product's operands, or by checking CSSMathValue.operator for the string "invert".
CSSMathInvert serializes using CSS calc() syntax, as calc(1 / <value>).
This example shows how you can use div() with a divisor that isn't a plain number to get a CSSMathProduct that has a CSSMathInvert as one of its operands. The value and serialization of that operand are also logged.
const product = CSS.px(200).div(CSS.percent(4));
console.log(product.constructor.name); // "CSSMathProduct"
console.log(product.values[1].constructor.name); // "CSSMathInvert"
console.log(product.values[1].value); // CSSUnitValue {value: 4, unit: "percent"}
console.log(product.toString()); // "calc(200px / 4%)"