Cửa sổ getComputedStyle()
Ví 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");
Hãy tự mình thử »Thêm ví dụ dưới đây.
Sự miêu tả
Phương thức getComputedStyle()
lấy 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 thức getComputedStyle()
trả về một CSSStyleDeclaration object
.
Kiểu tính toán
Kiểu được 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: biểu đị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ả về
Kiểu | Sự miêu tả |
Một đối tượng | Một đối tượng CSSStyleDeclaration có tất cả các thuộc tính và giá trị CSS của phần tử. |
Thêm ví dụ
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>";
}
Hãy tự mình thử »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ãy tự mình thử »Hỗ trợ trình duyệt
getComputedStyle()
được hỗ trợ trong tất cả các trình duyệt:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | 9-11 |