CSSMathSum
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Giao diện CSSMathSum của CSS Typed Object Model API biểu thị kết quả thu được khi gọi add(), sub(), hoặc toSum() trên CSSNumericValue.
CSSMathSum là loại đối tượng được trả về khi sử dụng phương thức StylePropertyMapReadOnly.get() trên một thuộc tính CSS có giá trị được tạo bằng hàm calc().
Hàm khởi tạo
CSSMathSum()Experimental-
Tạo một đối tượng
CSSMathSummới.
Thuộc tính phiên bản
CSSMathSum.values-
Trả về một đối tượng
CSSNumericArraychứa một hoặc nhiều đối tượngCSSNumericValue.
Phương thức tĩnh
Giao diện cũng có thể kế thừa phương thức từ giao diện cha CSSMathValue.
Phương thức phiên bản
Giao diện cũng có thể kế thừa phương thức từ giao diện cha CSSMathValue.
Ví dụ
Chúng ta tạo một phần tử với width được xác định bằng hàm calc(), sau đó dùng console.log() để ghi lại operator và values, và đào sâu vào các giá trị.
<div>has width</div>
Chúng ta gán width
div {
width: calc(30% - 20px);
}
Chúng ta thêm 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'
Đặc tả vẫn đang phát triển. Trong tương lai chúng ta có thể viết ba dòng cuối như:
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'
Thông số kỹ thuật
| Specification |
|---|
| CSS Typed OM Level 1 # cssmathsum |