window.getComputedStyle(body).getPropertyValue('background-color')与body.style.backgroundColor的区别
我正在尝试获取身体的背景颜色，我想知道这两者的区别是什么：
body.style.backgrounColor和
window.getComputedStyle(body).getPropertyValue('background-color')给定var body = document.getElementsByTagName("body")[0];
有没有其他方法可以让我得到背景颜色？
回答 4
Stack Overflow用户
发布于 2013-11-13 09:11:05
使用：
document.body.style.backgroundColor直接在元素上设置样式，或者返回通过style属性或属性设置的相关样式属性的当前值。用户代理在确定如何在应用CSS rules (如果有)时显示元素时会考虑这些值。
元素的样式对象不一定反映通过CSS规则应用于元素的值，尽管它们可能是相同的(偶然或故意将两者设置为相同的值)。
CSS2.1 spec中列出了将样式规则应用于元素的顺序。直接应用于元素的规则的优先级仅次于!important声明。
使用：
window.getComputedStyle(document.body, null).getPropertyValue('background-color')在DOM Level 2规范中进行了描述。基本上，它返回当前样式属性值，该属性值用于根据CSS规则显示元素，即实际应用于元素的内容。
这通常不同于相关样式属性的值(除非由属性或属性设置，否则没有值)。
Stack Overflow用户
发布于 2013-11-13 09:09:06
实际上，document.body.style.backgroundColor只会得到这样的元素的inline样式的property
<body style="background-color:red">另一方面，在将CSS和样式应用于元素之后，window.getComputedStyle将get实际属性，例如，这可以使用window.getComputedStyle获得
body{
background-color:#fff;
}但是使用document.body.style.backgroundColor无法读取上面给出的css样式。检查this example。此外，请检查this。
Stack Overflow用户
发布于 2013-11-13 08:59:30
仅仅使用body.style.backgroundColor将只能感知主体上是否有内联样式并提供给您(例如，通过html中的style属性或使用JavaScript中的style属性应用的样式)。getComputedStyle还可以通过<style>标记中的样式表、从父元素继承的样式等等获取应用到它的样式。
简而言之，body.style.backgroundColor将获得style属性中的背景色(<body style="background-color:red>)或通过JavaScript应用的背景色，getComputedStyle还将能够从样式表中获得样式(<style>body{background-color:red}</style>)
https://stackoverflow.com/questions/19943118
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号