CSSMathValue
Draft: This page is not complete.
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 (CSS Typed OM 2) # 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 |
No |
66 |
66 |
No |
47 |
No |
9.0 |
operator |
66 |
79 |
No |
No |
53 |
No |
66 |
66 |
No |
47 |
No |
9.0 |
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSSMathValue