getComputedStyle trả về một CSSStyleDeclaration nhưng tất cả các thuộc tính đều trống trên truy cập

Question

Tôi có một div đơn giản sử dụng một lớp css mà lần lượt có một thuộc tính color và background-color.

var div = document.createElement("div"); 
div.classList.add("my-css-class"); 
container.appendChild(div); 

//This prints out a CSSStyleDeclaration object. This is a large object to which I see `color` and `backgroundColor` 
console.log(getComputedStyle(div)); 

//this gives me an empty string 
console.log(getComputedStyle(div).color); 

//this gives me an empty string 
console.log(getComputedStyle(div).getPropertyValue("color")); 

Tại sao tôi không thể truy cập các thuộc tính của CSSStyleDeclaration? Tôi biết nó có từ nhật ký đầu tiên của tôi. Tôi có thể thấy color: "rgb(82, 194, 145)"

Answer 1

Cuối cùng, vấn đề với getComputedStyle là có vẻ như yếu tố được đề cập phải là một phần của DOMTree để mọi kiểu có sẵn.

Lưu ý trong trường hợp của tôi, tôi đã thêm div vào vùng chứa chính, tuy nhiên, vùng chứa mẹ tại điểm instantiation chưa được thêm vào DOMTree.

Thất bại của tôi khi sử dụng JSON.stringify() để in đối tượng có nghĩa là các giá trị đã xuất hiện sau đó nhưng tại thời điểm truy cập, trống. Vì vậy, về cơ bản, tôi đã thay đổi container.appendChild thành document.body.appendChild tạm thời để tính toán kiểu mà tôi cần ngay lập tức, sau đó loại bỏ nó và hủy nó để lại cho tôi chỉ những màu tôi cần.