getComputedStyle возвращает CSSStyleDeclaration, но все свойства пусты при доступе

Question

У меня есть простой div, который использует класс CSS, который в свою очередь имеет 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 временно, чтобы сразу вычислить нужный мне стиль, а затем удалить его и уничтожить, оставив мне только нужные мне цвета.