CSSMathSum

CSSMathSum 接口是 CSS Typed 对象模型 API 的一部分，它表示通过在 CSSNumericValue 上调用 add()、sub() 或 toSum() 获得的结果。

当使用 StylePropertyMapReadOnly.get() 方法获取其值为使用 calc() 函数创建的 CSS 属性时，会返回 CSSMathSum 对象类型。

CSSStyleValue CSSNumericValue CSSMathValue CSSMathSum

构造函数

CSSMathSum()

创建一个新的 CSSMathSum 对象。

实例属性

CSSMathSum.values

返回一个 CSSNumericArray 对象，其中包含一个或多个 CSSNumericValue 对象。

静态方法

该接口也可能从其父接口 CSSMathValue 继承方法。

实例方法

该接口也可能从其父接口 CSSMathValue 继承方法。

示例

我们创建一个元素，其 width 由 calc() 函数确定，然后 console.log() operator 和 values，并深入研究这些值。

html
<div>has width</div>

我们分配一个 width

css
div {
  width: calc(30% - 20px);
}

我们添加 JavaScript

js
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); // CSSNumericArray {0: CSSUnitValue, 1: CSSUnitValue, length: 2}
console.log(styleMap.get("width").values[0]); // CSSUnitValue {value: 30, unit: "percent"}
console.log(styleMap.get("width").values[0].value); // 30
console.log(styleMap.get("width").values[0].unit); // 'percent'
console.log(styleMap.get("width").values[1]); // CSSUnitValue {value: -20, unit: "px"}
console.log(styleMap.get("width").values[1].value); //  -20
console.log(styleMap.get("width").values[1].unit); // 'px'

规范仍在不断发展。将来，我们可能会将最后三行写成

js
console.log(styleMap.get("width").values[1]); // CSSMathNegate {value: CSSUnitValue, operator: "negate"}
console.log(styleMap.get("width").values[1].value); // CSSUnitValue {value: 20, unit: "px"}
console.log(styleMap.get("width").values[1].value.unit); // 'px'

规范

规范
CSS Typed OM 级别 1
# cssmathsum

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。