CSSMathValue
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The CSSMathValue
interface of the CSS_Object_Model#css_typed_object_model a base class for classes representing complex numeric values.
Interfaces based on CSSMathValue
Below is a list of interfaces based on the CSSMathValue interface.
Properties
CSSMathValue.operator
-
Indicates the operator that the current subtype represents.
Event handlers
No
Methods
None.
Examples
We create an element with a width
determined using a calc()
function, then console.log()
the operator
.
<div>has width</div>
We assign a width
with a calculation
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[1].value ); // -20
The CSSMathValue.operator
returns 'sum
' because styleMap.get('width').values[1].value );
is -20
: adding a negative number.
Specifications
Specification |
---|
CSS Typed OM Level 2 # complex-numeric |
Browser compatibility
BCD tables only load in the browser