CSSMathValue - Web APIs | MDN

Interfaces based on CSSMathValue

Below is a list of interfaces based on the CSSMathValue interface.

Instance properties

CSSMathValue.operator

Indicates the operator that the current subtype represents.

Static methods

The interface may also inherit methods from its parent interface, CSSNumericValue.

Instance methods

The interface may also inherit methods from its parent interface, CSSNumericValue.

Examples

We create an element with a width determined using a calc() function, then console.log() the operator.

We assign a width with a calculation

css

div {
  width: calc(30% - 20px);
}

We add the JavaScript

js

const styleMap = document.querySelector("div").computedStyleMap();

console.log(styleMap.get("width")); // CSSMathSum {values: CSSNumericArray, operator: "sum"}
console.log(styleMap.get("width").operator); // 'sum'
console.log(styleMap.get("width").values[1].value); // -20

The CSSMathValue.operator returns "sum" because styleMap.get("width").values[1].value ); is -20: adding a negative number.

Specifications

Specification
CSS Typed OM Level 1
# complex-numeric

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.