CSSMathSum
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.
Constructor
CSSMathSum()
-
Creates a new
CSSMathSum
object.
Properties
CSSMathSum.values
-
Returns a
CSSNumericArray
object which contains one or moreCSSNumericValue
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 |
---|
CSS Typed OM Level 2 # cssmathsum |
Browser compatibility
BCD tables only load in the browser