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

The CSSMathSum interface of the CSS_Object_Model#css_typed_object_model represents the result obtained by calling add(), sub(), or toSum() on CSSNumericValue.

A CSSMathSum is the object type returned when the StylePropertyMapReadOnly.get() method is used on a CSS property whose value is created with a calc() function.

CSSStyleValue CSSNumericValue CSSMathValue CSSMathSum


CSSMathSum() Experimental

Creates a new CSSMathSum object.


CSSMathSum.values Experimental

Returns a CSSNumericArray object which contains one or more CSSNumericValue objects.

Event handlers





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

<div>has width</div>

We assign a width

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);           // CSSNumericArray {0: CSSUnitValue, 1: CSSUnitValue, length: 2}
console.log(styleMap.get('width').values[0]);        // CSSUnitValue {value: 30, unit: "percent"}
console.log(styleMap.get('width').values[0].value);  // 30
console.log(styleMap.get('width').values[0].unit);   // 'percent'
console.log(styleMap.get('width').values[1]);        // CSSUnitValue {value: -20, unit: "px"}
console.log(styleMap.get('width').values[1].value);  //  -20
console.log(styleMap.get('width').values[1].unit);   // 'px'

The specification is still evolving. In the future we may write the last three lines as:

console.log(styleMap.get('width').values[1]);            // CSSMathNegate {value: CSSUnitValue, operator: "negate"}
console.log(styleMap.get('width').values[1].value);      // CSSUnitValue {value: 20, unit: "px"}
console.log(styleMap.get('width').values[1].value.unit); // 'px'


CSS Typed OM Level 2
# cssmathsum

Browser compatibility

BCD tables only load in the browser