document.body.style.backgroundColor 不适用于外部 CSS 样式表 [重复]答案

【问题标题】：document.body.style.backgroundColor doesn't work with external CSS style sheet [duplicate]document.body.style.backgroundColor 不适用于外部 CSS 样式表 [重复]
【发布时间】：2014-11-22 08:17:15
【问题描述】：

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

body
{
    background-color: red;   
}

在我的 css 样式表中，javascript alert alert(document.body.style.backgroundColor); 显示空字符串。工作示例here。

但是当我有

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

它显示（应该）“红色”。示例here。

我会很感激一个很好的解释，甚至更多的答案如何解决第一个例子。

【问题讨论】：

谷歌js element actual style累了吗？

标签： javascript html css

【解决方案1】：

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

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

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

【讨论】：

谢谢，这就是我要找的解释！

【解决方案2】：

你正在使用 jquery 好友

试试这个它会给出 rgb 值

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

Js Fiddle

如果你想要十六进制值试试这个

Js Fiddle

【讨论】：

当你将 jsfiddle 中的库更改为“none”时，你会得到你期望的结果
"you are using jquery" — 问题没有提到 jQuery，jquery 标签没有使用，javascript 标签说 除非框架或库的标签是也包括在内，需要一个纯 JavaScript 答案
但是在他的 js fiddle 她已经链接了 jquery

【解决方案3】：

试试这个

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

【讨论】：