关于javascript：document.body.style.backgroundColor不适用于外部CSS样式表


document.body.style.backgroundColor doesn't work with external CSS style sheet

本问题已经有最佳答案，请猛点这里访问。

谁能告诉我为什么document.body.style.backgroundColor不适用于外部CSS样式表？
我的意思是：当我有

1
2
3
4
body
{
    background-color: red;  
}

我的CSS样式表javascript警报alert(document.body.style.backgroundColor);中的

显示空字符串。
这里的工作示例。

但是当我有

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

显示(应有的)"红色"。
这里的例子。

我将很高兴为您提供一个很好的解释，甚至为如何解决第一个示例提供了一个答案。

相关讨论

DOM元素上的

.style属性为该特定元素返回CSSStyleDeclaration。根据.style访问的定义，它是元素本身的样式。
style=属性控制相同的值，因此您可以看到结果。

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

您正在寻找的是window.getComputedStyle，以获取元素当前样式的只读视图：window.getComputedStyle(document.body).backgroundColor确实返回正确的值，如更新的Fiddle中所示。

相关讨论

试试这个

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

您正在使用jquery好友

尝试此操作将给出rgb值

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

Js小提琴

如果您想要十六进制值，请尝试此

Js小提琴

相关讨论