Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The CSSMathValue.operator read-only property of the CSSMathValue interface indicates the operator that the current subtype represents. For example, if the current CSSMathValue subtype is CSSMathSum, this property will return the string "sum".


A String.

Interface Value
CSSMathSum "sum"
CSSMathProduct "product"
CSSMathMin "min"
CSSMathMax "max"
CSSMathClamp "clamp"
CSSMathNegate "negate"
CSSMathInvert "invert"


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

<div>My width has a <code>calc()</code> function</div>

We assign a width with a calculation

div {
  width: calc(50% - 0.5vw);

We add the JavaScript

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

console.log(styleMap.get('width'));                   // CSSMathSum {values: CSSNumericArray, operator: "sum"}
console.log(styleMap.get('width').values);            // CSSNumericArray {0: CSSUnitValue, 1: CSSMathNegate, length: 2}
console.log(styleMap.get('width').operator);          // 'sum'
console.log(styleMap.get('width').values[1].operator); // 'negate'

The CSSMathValue.operator returns sum for the equation and negate for the operator on the second value.


CSS Typed OM Level 1
# dom-cssmathvalue-operator

Browser compatibility

BCD tables only load in the browser