Web/API/CSSMathSum

From Get docs

Draft This page is not complete.


This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.


The CSSMathSum interface of the CSS Typed Object Model API 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 whosevalue is created with a calc() function.

Constructor

CSSMathSum.CSSMathSum()
Creates a new CSSMathSum object.

Properties

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

Event handlers

No

Methods

None.

Examples

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'

Specifications

Specification Status Comment
CSS Typed OM Level 1The definition of 'CSSMathSum' in that specification. Working Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet

CSSMathSum

Experimental'

Chrome

Full support 66

Edge

Full support 79

Firefox

No support No

IE

No support No

Opera

Full support 53

Safari

No support No

WebView Android

Full support 66

Chrome Android

Full support 66

Firefox Android

No support No

Opera Android

Full support 47

Safari iOS

No support No

Samsung Internet Android

Full support 9.0

CSSMathSum() constructor

Experimental'

Chrome

Full support 66

Edge

Full support 79

Firefox

No support No

IE

No support No

Opera

Full support 53

Safari

No support No

WebView Android

Full support 66

Chrome Android

Full support 66

Firefox Android

No support No

Opera Android

Full support 47

Safari iOS

No support No

Samsung Internet Android

Full support 9.0

values

Experimental'

Chrome

Full support 66

Edge

Full support 79

Firefox

No support No

IE

No support No

Opera

Full support 53

Safari

No support No

WebView Android

Full support 66

Chrome Android

Full support 66

Firefox Android

No support No

Opera Android

Full support 47

Safari iOS

No support No

Samsung Internet Android

Full support 9.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.'
Experimental. Expect behavior to change in the future.