The CSSMathValue interface of the CSS_Object_Model#css_typed_object_model a base class for classes representing complex numeric values.
The CSSMathValue interface of the CSS_Object_Model#css_typed_object_model a base class for classes representing complex numeric values.
Below is a list of interfaces based on the CSSMathValue interface.
CSSMathValue.operatorIndicates the operator that the current subtype represents.
The interface may also inherit methods from its parent interface, CSSNumericValue.
The interface may also inherit methods from its parent interface, CSSNumericValue.
No
We create an element with a width determined using a calc() function, then console.log() the operator.
html
<div>has width</div>
We assign a width with a calculation
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[1].value); // -20
The CSSMathValue.operator returns 'sum' because styleMap.get('width').values[1].value ); is -20: adding a negative number.
| Specification |
|---|
| CSS Typed OM Level 1 # complex-numeric |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
CSSMathValue |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
operator |
66 | 79 | No | No | 53 | 16.4 | 66 | 66 | No | 47 | 16.4 | 9.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSSMathValue