CSSMathValue.operator
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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 |
---|---|
|
"sum" |
|
"product" |
|
"min" |
|
"max" |
|
"clamp" |
|
"negate" |
|
"invert" |
Examples
We create an element with a width
determined using a calc()
function,
then console.log()
the
operator
.
<div>My width has a <code>calc()</code> function</div>
We assign a width
with a calculation
div {
width: calc(50% - 0.5vw);
}
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').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 2 # dom-cssmathvalue-operator |
Browser compatibility
BCD tables only load in the browser