CSSMathSum
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
TheCSSMathSum interface of theCSS Typed Object Model API represents the result obtained by callingadd(),sub(), ortoSum() onCSSNumericValue.
A CSSMathSum is the object type returned when theStylePropertyMapReadOnly.get() method is used on a CSS property whose value is created with acalc() function.
Constructor
CSSMathSum()ExperimentalCreates a new
CSSMathSumobject.
Instance properties
CSSMathSum.valuesReturns a
CSSNumericArrayobject which contains one or moreCSSNumericValueobjects.
Static methods
The interface may also inherit methods from its parent interface,CSSMathValue.
Instance methods
The interface may also inherit methods from its parent interface,CSSMathValue.
Examples
We create an element with awidth determined using acalc() function, thenconsole.log() theoperator andvalues, and dig into the values a bit.
<div>has width</div>We assign awidth
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); // 30console.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); // -20console.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 1 # cssmathsum |