CSSMathValue

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

The CSSMathValue interface of the CSS_Object_Model#css_typed_object_model a base class for classes representing complex numeric values.

CSSStyleValue CSSNumericValue CSSMathValue

Interfaces based on CSSMathValue

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

Properties

CSSMathValue.operator

Indicates the operator that the current subtype represents.

Event handlers

No

Methods

None.

Examples

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

<div>has width</div>

We assign a width with a calculation

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

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').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 2
# complex-numeric

Browser compatibility

BCD tables only load in the browser