CSSMathSum - 表示调用 CSSNumericValue 的方法返回的结果

CSSMathSum 是 CSS Typed Object Model API 的接口，表示调用 CSSNumericValue 的 add()，sub() 或 toSum() 的方法返回的结果。

CSSMathSum 是在使用 calc() 函数创建的 CSS 属性上使用 StylePropertyMapReadOnly.get() 方法时返回的对象类型。

构造函数

CSSMathSum.CSSMathSum()

创建一个新的 CSSMathSum 对象。

属性

CSSMathSum.values

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

事件处理程序

无。

方法

无。

实例

我们使用 calc() 函数处理一个具有 width 的元素，然后 console.log() 输出的 operator 和 values 的值。

<style>
div {
  width: calc(30% - 20px);
}
</style>

<div>具有宽度属性</div>

<script>
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'
</script>

尝试一下 »

规范仍在不断更新。将来，我们可能会将最后三行写为：

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 Level 1 CSSMathSum 的定义	工作草案	初始定义。

桌面浏览器兼容性

移动浏览器兼容性