CSSMathValue: operator property

{{APIRef("CSS Typed Object Model API")}}

The CSSMathValue.operator read-only property of the {{domxref("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".

Value

A {{jsxref('String')}}.

Examples

We create an element with a {{cssxref("width")}} determined using a {{cssxref("calc()")}} function, then {{domxref("console/log_static", "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'

{{EmbedLiveSample("Examples", 120, 300)}}

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

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}