CSSMathValue: operator property
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
The CSSMathValue.operator read-only
property of the CSSMathValue interface indicates the operator that the
current subtype represents. For example, if the current CSSMathValue
subtype is CSSMathSum, this property will return the string
"sum".
Value
A String.
| Interface | Value |
|---|---|
CSSMathSum |
"sum" |
CSSMathProduct |
"product" |
CSSMathMin |
"min" |
CSSMathMax |
"max" |
CSSMathClamp |
"clamp" |
CSSMathNegate |
"negate" |
CSSMathInvert |
"invert" |
Examples
We create an element with a width
determined using a calc() function,
then console.log() the
operator.
html
<div>My width has a <code>calc()</code> function</div>
We assign a width with a calculation
css
div {
width: calc(50% - 0.5vw);
}
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").values); // CSSNumericArray {0: CSSUnitValue, 1: CSSMathNegate, length: 2}
console.log(styleMap.get("width").operator); // 'sum'
console.log(styleMap.get("width").values[1].operator); // 'negate'
The CSSMathValue.operator returns sum for the equation and
negate for the operator on the second value.
Specifications
| Specification |
|---|
| CSS Typed OM Level 1 # dom-cssmathvalue-operator |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
operator
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.