Cửa sổ getComputedStyle ()
Thí dụ
Lấy màu nền được tính toán của một phần tử:
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");
Thêm ví dụ bên dưới.
Định nghĩa và Cách sử dụng
Phương getComputedStyle()thức này nhận các thuộc tính và giá trị CSS được tính toán của một phần tử HTML.
Phương getComputedStyle()thức trả về a
CSSStyleDeclaration object.
Kiểu tính toán
Kiểu tính toán là kiểu được sử dụng trên phần tử sau khi tất cả các nguồn tạo kiểu đã được áp dụng.
Nguồn kiểu: bảng định kiểu bên ngoài và bên trong, kiểu kế thừa và kiểu mặc định của trình duyệt.
Xem thêm:
Cú pháp
window.getComputedStyle(element, pseudoElement)
Thông số
| Parameter | Description |
| element | Required. The element to get the computed style for. |
| pseudoElement | Optional. A pseudo-element to get. |
Giá trị trả lại
| Loại | Sự miêu tả |
| Một đối tượng | Một đối tượng CSSStyleDec Tuyên bố với tất cả các thuộc tính và giá trị CSS của phần tử. |
Các ví dụ khác
Nhận tất cả các kiểu được tính toán từ một phần tử:
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let text = "";
for (x in cssObj) {
cssObjProp = cssObj.item(x)
text += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}
Nhận kích thước phông chữ được tính toán của chữ cái đầu tiên trong một phần tử (sử dụng phần tử giả):
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");
Hỗ trợ trình duyệt
getComputedStyle()được hỗ trợ trong tất cả các trình duyệt:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |