getComputedStyle restituisce una dichiarazione CSSStyleDeclaration ma tutte le proprietà sono vuote all'accesso

Question

Ho un semplice div che utilizza una classe css che a sua volta ha un set di proprietà color e 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")); 

Perché non riesco ad accedere alle proprietà di CSSStyleDeclaration? So che è lì dal mio primo log. Vedo color: "rgb(82, 194, 145)"

Answer 1

In definitiva il problema con getComputedStyle è che sembra che l'elemento in questione deve essere una parte del DOMTree affinché lo stile sia disponibile.

Avviso nel mio caso, stavo aggiungendo il div al contenitore genitore, tuttavia, il contenitore genitore nel punto di istanziazione non è stato ancora aggiunto al DOMTree.

L'errore di utilizzare JSON.stringify() per stampare l'oggetto significava che i valori apparivano più tardi ma al momento dell'accesso erano vuoti.

Quindi, in pratica, ho modificato temporaneamente il mio container.appendChild in document.body.appendChild per calcolare lo stile di cui ho bisogno immediatamente e quindi rimuoverlo e distruggerlo lasciandomi solo i colori di cui avevo bisogno.