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
The interface may also inherit methods from its parent interface, CSSMathValue
.
The interface may also inherit methods from its parent interface, CSSMathValue
.
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.
We assign a width
div {
width : calc ( 30% - 20px) ;
}
We add the JavaScript
const styleMap = document. querySelector ( "div" ) . computedStyleMap ( ) ;
console. log ( styleMap. get ( "width" ) ) ;
console. log ( styleMap. get ( "width" ) . operator) ;
console. log ( styleMap. get ( "width" ) . values) ;
console. log ( styleMap. get ( "width" ) . values[ 0 ] ) ;
console. log ( styleMap. get ( "width" ) . values[ 0 ] . value) ;
console. log ( styleMap. get ( "width" ) . values[ 0 ] . unit) ;
console. log ( styleMap. get ( "width" ) . values[ 1 ] ) ;
console. log ( styleMap. get ( "width" ) . values[ 1 ] . value) ;
console. log ( styleMap. get ( "width" ) . values[ 1 ] . unit) ;
The specification is still evolving. In the future we may write the last three lines as:
console. log ( styleMap. get ( "width" ) . values[ 1 ] ) ;
console. log ( styleMap. get ( "width" ) . values[ 1 ] . value) ;
console. log ( styleMap. get ( "width" ) . values[ 1 ] . value. unit) ;