CSSMathValue

The CSSMathValue interface of the CSS Typed Object Model API is the base interface for objects representing complex numeric values produced by the CSS calc(), min(), max(), and clamp() functions.

Instance properties

CSSMathValue.operator Read only

Returns the operator that the current subtype represents.

Static methods

Also inherits methods from its parent interface, CSSNumericValue.

Instance methods

Also inherits methods from its parent interface, CSSNumericValue.

Interfaces based on CSSMathValue

• CSSMathClamp
• CSSMathInvert
• CSSMathMax
• CSSMathMin
• CSSMathNegate
• CSSMathProduct
• CSSMathSum

Examples

calc() representations

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(30% - 20px);
}

#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(`type: ${width.constructor.name}`);
log(`operator: ${width.operator}`);
log(`nested value type: ${width.values[1].constructor.name}`);
log(`nested value operator: ${width.values[1].operator}`);

Result

width is represented by a CSSMathSum object whose operator is "sum", because calc(30% - 20px) is represented as an addition of 30% and the negation of 20px. The second nested value's type is CSSMathNegate and its operator is "negate" (reflecting that negation).

Specifications

• CSS Typed OM Level 1