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

 2021-04-27 

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小提琴