CSSMathSum
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()
Experimental-
Creates a new
CSSMathSum
object.
Instance properties
CSSMathSum.values
-
Returns a
CSSNumericArray
object which contains one or moreCSSNumericValue
objects.
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
.
Event handlers
No
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.
html
<div>has width</div>
We assign a width
css
div {
width: calc(30% - 20px);
}
We add the JavaScript
js
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:
js
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 |
Browser compatibility
BCD tables only load in the browser