我正在尝试获取身体的背景颜色，我想知道两者之间有什么区别：
body.style.backgrounColor和
window.getComputedStyle(body).getPropertyValue('background-color')
鉴于 var body = document.getElementsByTagName("body")[0];
有没有其他方法可以获得背景颜色？
问问题
2145 次
4 回答
6
使用：
document.body.style.backgroundColor
直接在元素上设置样式，或返回已通过样式属性或属性设置的相关样式属性的当前值。用户代理在应用CSS 规则（如果有）时确定如何显示元素时会考虑这些值。
元素的样式对象不一定反映通过 CSS 规则应用于元素的值，尽管它们可能相同（偶然或故意将两者设置为相同的值）。
CSS2.1 规范中列出了样式规则应用于元素的顺序。直接应用于元素的规则具有第二高的优先级，仅次于!important声明。
使用：
window.getComputedStyle(document.body, null).getPropertyValue('background-color')
在DOM Level 2规范中描述。基本上，它根据 CSS 规则返回用于显示元素的当前样式属性值，即实际应用于元素的内容。
这通常与相关样式属性的值不同（除非由属性或属性设置，否则没有值）。
于 2013-11-13T01:11:05.027 回答
2
实际上，document.body.style.backgroundColor只会得到这样的元素的inline样式property
<body style="background-color:red">
另一方面，window.getComputedStyle将get实际属性CSS和样式应用于元素，例如，这可以使用window.getComputedStyle
body{
background-color:#fff;
}
css但是使用 . 阅读上面给出的样式是不可能的document.body.style.backgroundColor。检查这个例子。另外，检查这个。
于 2013-11-13T01:09:05.627 回答
1
仅使用body.style.backgroundColor将只能感知内联样式是否在正文上并为您提供（例如，通过stylehtml 中的属性应用的样式或使用styleJavaScript 中的属性）。还通过标签中的样式表、从父元素继承的样式以及所有内容getComputedStyle获取应用到它的样式。<style>
简而言之，body.style.backgroundColor将获取style属性（<body style="background-color:red>）中或通过 JavaScript 应用的背景颜色，getComputedStyle也将能够从样式表（<style>body{background-color:red}</style>）中获取样式
于 2013-11-13T00:59:30.243 回答
-1
如果你有
background-color: red !important;
.css 文件或<style>元素中的任何位置，将覆盖内联样式，例如style="background-color: blue;"
于 2013-11-13T00:55:53.387 回答