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 chất tính toán

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

Nguồn樣式: Syles từ bảng樣式 bên ngoài và bên trong, syles kế thừa và syles 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 chất 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 tính toán của ký tự đầu tiên trong phần tử (sử dụng phần tử ảo):

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)

参數

参數 Mô tả
element Bắt buộc. Phần tử cần lấy tính chất tính toán.
pseudoElement Tùy chọn. Phần tử ảo cần 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 style chỉ cho phép truy cập vào樣式 của phần tử nội tuyến, có thể sử dụng bất kỳ đơn vị nào bạn chỉ định, và không thể cung cấp cho bạn bất kỳ thông tin nào về樣式 của bảng樣式 được á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ợ