document.body.style.backgroundColor与外部CSS样式表不兼容。

Question

document.body.style.backgroundColor与外部CSS样式表不兼容。

7

有人能告诉我为什么document.body.style.backgroundColor不能与外部CSS样式表一起使用吗？我的意思是：当我有

body
{
    background-color: red;   
}

我的 CSS 样式表中，JavaScript 提示 alert(document.body.style.backgroundColor); 显示为空字符串。可在此处查看运行示例：http://jsfiddle.net/o9cqzdnt/59/。

但是当我加入以下样式时：

<body style="background-color: red;"></body>

它显示的是“红色”（应该如此）。例如这里。

我希望能得到一个好的解释，更希望得到如何修复第一个示例的答案。

- KaroCodes

1

你有没有尝试过谷歌搜索js element actual style？ - Lesha Ogonkov

3个回答

1

你正在使用jQuery，朋友。

试试这个，它会给出RGB值。

alert($('body').css('background-color'));

Js Fiddle

如果您想要十六进制值，请尝试使用此方法。

Js Fiddle

- Vitorino fernandes

当你在JSFiddle中将库更改为“无”时，你会得到你所期望的结果。 - Dave Bush

你正在使用jQuery。——该问题没有提到jQuery，也没有使用jquery标签，javascript标签表示除非还包括框架或库的标签，否则预期是纯JavaScript答案。 - Quentin

但是在她的 JS Fiddle 中，她已经链接了 jQuery。 - Vitorino fernandes

1

试试这个

var element =     document.getElementsByTagName('body')[0];                     
var style = window.getComputedStyle(element),
var bgColor    = style.getPropertyValue('background-color');

- Danis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Denis · Accepted Answer

.style属性在DOM元素上返回一个CSSStyleDeclaration，用于表示该特定元素的样式。根据.style访问的定义，它是元素本身的样式。

style=属性控制同样的值，所以你看到了结果。

然而，使用选择器应用的CSS不直接是元素的属性。考虑CSS p { color: red }。这个CSS适用于多个元素，因此，在特定元素级别上被覆盖是没有意义的。

你需要寻找的是window.getComputedStyle，以获取元素当前样式的只读视图：window.getComputedStyle(document.body).backgroundColor确实返回了正确的值，就像在更新后的Fiddle中看到的那样。