CSSMathValue: operator property
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
BCD tables only load in the browser