CSSMathValue: operator property

Value

A String.

Examples

Basic usage

This example shows how the operator property identifies the operation represented by a calc() value's CSSMathValue subtype, including for a nested value.

HTML

<div id="demoBox">Text</div>

<pre id="log"></pre>

CSS

width is set using a calc() subtraction, which is represented as a CSSMathSum whose second term is negated.

#demoBox {
  width: calc(50% - 0.5vw);
}

#log {
  height: 80px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText += `${text}\n`;
}

We read the width value using computedStyleMap(), then log its operator and the operator of its nested value.

const styleMap = document.querySelector("#demoBox").computedStyleMap();
const width = styleMap.get("width");

log(`operator: ${width.operator}`);
log(`nested value operator: ${width.values[1].operator}`);

Result

width is represented by a CSSMathSum object whose operator is "sum", because calc(50% - 0.5vw) is represented as an addition of 50% and the negation of 0.5vw. The second nested value's operator is "negate", reflecting that negation.

Specifications

Browser compatibility