Question

我正在尝试获取身体的背景颜色，我想知道它们之间有什么区别：

body.style.backgrounColor和

window.getComputedStyle(body).getPropertyValue('background-color')

鉴于var body = document.getElementsByTagName("body")[0];

还有其他方法可以获得背景色吗？

Answer 1

使用：

body.style.backgroundColor

直接在元素上设置style，或返回通过样式属性或属性设置的相关样式属性的当前值。在确定应用CSS rules时如何显示元素时，用户代理会考虑这些值（如果有的话）。

元素的样式对象不一定反映通过CSS规则应用于元素的值，尽管它们可能是相同的（偶然或故意将两者都设置为相同的值）。

CSS2.1 spec中列出了样式规则应用于元素的顺序。在!important声明之后，直接应用于元素的规则具有第二高的优先级。

使用：

window.getComputedStyle(body).getPropertyValue('background-color')

在DOM Level 2规范中描述。基本上，它返回当前样式属性值，用于显示基于CSS规则的元素，即实际应用于元素的内容。

这通常与相关样式属性的值不同（除非由属性或属性设置，否则没有值）。

Answer 2

只使用body.style.backgroundColor只能感知内联样式是否在主体上并为您提供（例如，通过html中的style属性应用的样式或使用{{1 JavaScript中的属性）。 style还会通过getComputedStyle标记中的样式表，父元素中的继承样式以及所有内容来获取应用于它的样式。

简而言之，<style>将获得body.style.backgroundColor属性（style）中的背景色或通过JavaScript应用，<body style="background-color:red>也将获得样式来自样式表（getComputedStyle）

Answer 3

实际上，document.body.style.backgroundColor只会获得此类元素的inline样式property

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

另一方面，window.getComputedStyle将get CSS之后的实际属性和样式应用于元素，例如，可以使用window.getComputedStyle < / p>

body{
    background-color:#fff;
}

但是使用css无法阅读上面给出的document.body.style.backgroundColor样式。检查this example。另外，请检查this。

Answer 4

如果你有

background-color: red !important;

.css文件或<style>元素中的任何位置都会覆盖内联样式，例如style="background-color: blue;"

body.style.backgroundColor和window.getComputedStyle（body）之间的区别.getPropertyValue（'background-color'）

4 个答案: