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 |
瀏覽器相容性
載入中…