getComputedStyleはCSSStyleDeclarationを返しますが、アクセス時にはすべてのプロパティが空です

Question

私はCSSクラスを使用する単純なdivを持っていますが、これはcolorと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")); 

CSSStyleDeclarationのプロパティにアクセスできないのはなぜですか？私はそれが私の最初のログからそこにあることを知っています。私は見ることができますcolor: "rgb(82, 194, 145)"

Answer 1

最後にgetComputedStyleの問題は、どの要素も利用可能であるためには問題の要素がDOMTreeの一部でなければならないということです。

私の場合は、divを親コンテナに追加していましたが、インスタンス化時点の親コンテナはまだDOMTreeに追加されていません。

JSON.stringify()を使用してオブジェクトを印刷できなかったのは、値が後で表示されていたがアクセス時に空白だったことを意味していました。

基本的に私はcontainer.appendChildをdocument.body.appendChildに一時的に変更して、すぐに必要なスタイルを計算し、それを削除して破壊しました。