Phương thức getComputedStyle()

Định nghĩa và cách sử dụng

getComputedStyle() Phương thức lấy các thuộc tính CSS và giá trị tính toán của phần tử HTML.

getComputedStyle() Phương thức trả về đối tượng CSSStyleDeclaration.

样式 tính toán

样式 tính toán là các樣式 được sử dụng trên phần tử sau khi áp dụng tất cả các nguồn样式.

Nguồn樣式: Syles từ bảng樣式 bên ngoài và bên trong, styles kế thừa và styles mặc định của trình duyệt.

Xem thêm:

Đối tượng CSSStyleDeclaration

Mô hình

Ví dụ 1

Lấy màu nền tính toán của phần tử:

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");

Thử ngay

Ví dụ 2

Lấy tất cả các樣式 tính toán 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>";
}

Thử ngay

Ví dụ 3

Lấy kích thước font-size tính toán của ký tự đầu tiên trong phần tử (sử dụng pseudo-element):

const element = document.getElementById("test"); const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");

Thử ngay

Cú pháp

window.getComputedStyle(element, pseudoElement)

Tham số

Tham số Mô tả
element Bắt buộc. Phần tử cần lấy樣式 tính toán.
pseudoElement Tùy chọn. Pseudo-element cần được lấy.

Trả về giá trị

Loại Mô tả
Đối tượng Đối tượng CSSStyleDeclaration chứa tất cả các thuộc tính CSS và giá trị của phần tử.

Khác biệt giữa phương thức getComputedStyle() và thuộc tính style

So sánh phương thức getComputedStyle() với thuộc tính style của HTMLElement: thuộc tính này chỉ cho phép truy cập vào样式的行内样式，bạn có thể sử dụng bất kỳ đơn vị nào bạn muốn, và không thể cung cấp cho bạn bất kỳ thông tin nào về các樣式 từ bảng樣式 áp dụng cho phần tử.

Hỗ trợ trình duyệt

Tất cả các trình duyệt đều hỗ trợ getComputedStyle()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ 9-11 Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ