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

у меня есть простой 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)"

6
css getcomputedstyle properties

1 ответов

в конечном счете проблема с getComputedStyle похоже, что рассматриваемый элемент должен быть частью DOMTree для того, чтобы любой стиль был доступен.

обратите внимание, что в моем случае я добавлял div в родительский контейнер, однако родительский контейнер в момент создания экземпляра еще не добавлен в DOMTree.

моя неспособность использовать JSON.stringify() для печати объекта означало, что значения появлялись позже, но во время доступа были пустыми.

Итак, в основном, я изменил свой container.appendChild to document.body.appendChild временно, чтобы вычислить стиль, который мне нужен сразу, а затем удалить его и уничтожить, оставив мне только цвета, которые мне нужны.

5