CSSMathSum

草案
此页面不完整。

这是 实验性技术
检查 浏览器兼容性表格 在生产中使用这之前。

CSSMathSum interface of the CSS Typed Object Model API represents the result obtained by calling add() , sub() ,或 toSum() on CSSNumericValue .

A CSSMathSum is the object type returned when the StylePropertyMapReadOnly.get() method is used on a CSS property whosevalue is created with a calc() 函数。

构造函数

CSSMathSum.CSSMathSum()
创建新的 CSSMathSum 对象。

特性

CSSMathSum.values
返回 CSSNumericArray object which contains one or more CSSNumericValue 对象。

事件处理程序

No

方法

None.

范例

We create an element with a width determined using a calc() function, then console.log() the operator and values , and dig into the values a bit.

<div>has width</div>
					

We assign a width

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 );           // 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'
					

The specification is still evolving. In the future we may write the last three lines as:

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'
					

规范

规范 状态 Comment
CSS Typed OM Level 1
The definition of 'CSSMathSum' in that specification.
工作草案 初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
CSSMathSum
Chrome 66 Edge 79 Firefox No IE No Opera 53 Safari No WebView Android 66 Chrome Android 66 Firefox Android No Opera Android 47 Safari iOS No Samsung Internet Android 9.0
CSSMathSum() 构造函数
Chrome 66 Edge 79 Firefox No IE No Opera 53 Safari No WebView Android 66 Chrome Android 66 Firefox Android No Opera Android 47 Safari iOS No Samsung Internet Android 9.0
values
Chrome 66 Edge 79 Firefox No IE No Opera 53 Safari No WebView Android 66 Chrome Android 66 Firefox Android No Opera Android 47 Safari iOS No Samsung Internet Android 9.0

图例

完整支持
完整支持
不支持
不支持
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
  1. CSSMathSum
  2. 构造函数
    1. CSSMathSum()
  3. 特性
    1. values