CSSMathSum
CSSMathSum 接口是 CSS 类型化对象模型 API 的一部分，它表示通过在 CSSNumericValue 上调用 add()、sub() 或 toSum() 方法获得的结果。
当对使用 calc() 函数创建值的 CSS 属性使用 StylePropertyMapReadOnly.get() 方法时，返回的对象类型就是 CSSMathSum。
构造函数
CSSMathSum()实验性-
创建一个新的
CSSMathSum对象。
实例属性
CSSMathSum.values-
返回一个
CSSNumericArray对象，其中包含一个或多个CSSNumericValue对象。
静态方法
该接口还可能继承其父接口 CSSMathValue 的方法。
实例方法
该接口还可能继承其父接口 CSSMathValue 的方法。
示例
我们创建一个元素，其 width 使用 calc() 函数确定，然后 console.log() 元素的 operator 和 values，并对 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 类型化 OM Level 1 # cssmathsum |
浏览器兼容性
加载中…