getComputedStyle returns CSSStyleDeclaration 但访问时所有属性均为空
getComputedStyle returns a CSSStyleDeclaration but all properties are empty on access
我有一个简单的 div,它使用 css class,后者又具有 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)"
最终 getComputedStyle
的问题是,所讨论的元素似乎必须是 DOMTree 的一部分才能使任何样式可用。
请注意,在我的例子中,我将 div 添加到父容器中,但是,实例化时的父容器尚未添加到 DOMTree 中。
我未能使用 JSON.stringify()
打印对象,这意味着值稍后出现,但在访问时是空白的。
所以基本上,我暂时将 container.appendChild
更改为 document.body.appendChild
以立即计算我需要的样式,然后将其删除并销毁,只留下我需要的颜色。
我有一个简单的 div,它使用 css class,后者又具有 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)"
最终 getComputedStyle
的问题是,所讨论的元素似乎必须是 DOMTree 的一部分才能使任何样式可用。
请注意,在我的例子中,我将 div 添加到父容器中,但是,实例化时的父容器尚未添加到 DOMTree 中。
我未能使用 JSON.stringify()
打印对象,这意味着值稍后出现,但在访问时是空白的。
所以基本上,我暂时将 container.appendChild
更改为 document.body.appendChild
以立即计算我需要的样式,然后将其删除并销毁,只留下我需要的颜色。