Question

我有一个使用css类的简单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来直接计算我需要的样式，然后将其删除并销毁它，只留下我需要的颜色。

getComputedStyle返回CSSStyleDeclaration，但访问时所有属性都为空

1 个答案: