CSSMathValue

{{APIRef("CSS Typed Object Model API")}}

The CSSMathValue interface of the CSS Typed Object Model API a base class for classes representing complex numeric values.

{{InheritanceDiagram}}

Interfaces based on CSSMathValue

Below is a list of interfaces based on the CSSMathValue interface.

• {{domxref('CSSMathInvert')}}
• {{domxref('CSSMathMax')}}
• {{domxref('CSSMathMin')}}
• {{domxref('CSSMathNegate')}}
• {{domxref('CSSMathProduct')}}
• {{domxref('CSSMathSum')}}

Instance properties

• {{domxref('CSSMathValue.operator')}}
  • : Indicates the operator that the current subtype represents.

Static methods

The interface may also inherit methods from its parent interface, {{domxref("CSSNumericValue")}}.

Instance methods

The interface may also inherit methods from its parent interface, {{domxref("CSSNumericValue")}}.

Examples

We create an element with a {{cssxref("width")}} determined using a {{cssxref("calc()")}} function, then {{domxref("console/log_static", "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

{{EmbedLiveSample("Examples", 120, 300)}}

The CSSMathValue.operator returns "sum" because styleMap.get("width").values[1].value ); is -20: adding a negative number.

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}