The CSSMathValue interface of the CSS_Object_Model#css_typed_object_model a base class for classes representing complex numeric values.
On this page
CSSMathValue
Interfaces based on CSSMathValue
Below is a list of interfaces based on the CSSMathValue interface.
Instance properties
-
CSSMathValue.operator -
Indicates the operator that the current subtype represents.
Static methods
The interface may also inherit methods from its parent interface, CSSNumericValue.
Instance methods
The interface may also inherit methods from its parent interface, CSSNumericValue.
Event handlers
No
Examples
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.
Specifications
| Specification |
|---|
| CSS Typed OM Level 1 # complex-numeric |
Browser compatibility
| 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