body.style.backgroundColor和window.getComputedStyle（body）.getPropertyValue（'background-color'）之间的区别
[英]Difference between body.style.backgroundColor and window.getComputedStyle(body).getPropertyValue('background-color')
问题描述
I am trying to get the background color of the body, and I am wondering what is the difference between: 
我试图获取身体的背景色，但我想知道两者之间的区别是什么：
body.style.backgrounColor and body.style.backgrounColor和
window.getComputedStyle(body).getPropertyValue('background-color')
Given that var body = document.getElementsByTagName("body")[0]; 给定var body = document.getElementsByTagName("body")[0];
Is there any other way I can get the background-color? 还有其他方法可以获取背景颜色吗？
4 个解决方案
解决方案1
2 2013-11-13 01:11:05
Using: 使用：
body.style.backgroundColor
sets the style directly on an element, or returns the current value of the related style property that has been set through the style attribute or property. 直接在元素上设置样式 ，或返回通过样式属性或属性设置的相关样式属性的当前值。 Such values are considered by a user agent when determining how to display an element when applying CSS rules (if there are any). 用户代理在确定应用CSS规则 （如果有）时如何显示元素时会考虑这些值。
An element's style object does not necessarily reflect values applied to an element through CSS rules, though they may be the same (by chance or deliberately setting both to the same value). 元素的样式对象不一定反映通过CSS规则应用于元素的值，尽管它们可能是相同的（偶然或有意将两者设置为相同的值）。
The order in which style rules are applied to an element are listed in the CSS2.1 spec . CSS2.1规范中列出了将样式规则应用于元素的顺序。 Rules applied directly to the element are of second highest precedence, after !important declarations. 在!important声明之后，直接应用于元素的规则具有第二高的优先级。
Using: 使用：
window.getComputedStyle(body).getPropertyValue('background-color')
is described in the DOM Level 2 specification. 在DOM级别2规范中进行了描述。 Basically, it returns the current style property values being used to display an element based on CSS rules, ie what is actually being applied to the element. 基本上，它基于CSS规则返回当前样式属性值，该值用于显示元素，即实际应用于该元素的值。
This often different to the value of the related style property (which not have a value unless set by a property or attribute). 这通常与相关样式属性的值（除非由属性或属性设置，否则不具有值）不同。
解决方案2
0 2013-11-13 00:59:30
just using body.style.backgroundColor will only be able to sense if an inline style is on the body and give you that (eg a style applied via the style attribute in the html or using the style property in JavaScript). 仅使用body.style.backgroundColor将只能感知到内联样式是否在主体上，并为您提供（例如，通过html中的style属性或使用JavaScript中的style属性应用的style ）。 getComputedStyle also gets styles that were applied to it via stylesheets in <style> tags, inherited styles from parent elements, and everything. getComputedStyle还可以通过<style>标记中的样式表，从父元素继承的样式以及所有内容来获取应用于其的样式。
In short, body.style.backgroundColor will get the background color that was in the style attribute ( <body style="background-color:red> ) or applied through JavaScript, getComputedStyle will also be able to get style from stylesheets ( <style>body{background-color:red}</style> ) 简而言之， body.style.backgroundColor将获得style属性（ <body style="background-color:red> ）中或通过JavaScript应用的<body style="background-color:red> ， getComputedStyle也将能够从样式表中获取样式（ <style>body{background-color:red}</style> ）
解决方案3
0 2013-11-13 01:09:05
Actually, document.body.style.backgroundColor will get only inline style property of an element like this 实际上， document.body.style.backgroundColor将仅获得像这样的元素的inline样式property
<body style="background-color:red">
On the other hand window.getComputedStyle will get the actual property after CSS and styles are applied to the element, for example, this is possible to get using window.getComputedStyle 另一方面，在将CSS和样式应用于元素后，例如window.getComputedStyle将get实际属性，这可以通过使用window.getComputedStyle获得。
body{
background-color:#fff;
}
But it's not possible to read css style given above using document.body.style.backgroundColor . 但是不可能使用document.body.style.backgroundColor读取上面给出的css样式。 Check this example . 检查此示例 。 Also, check this . 另外，检查此 。
解决方案4
-1 2013-11-13 00:55:53
If you have 如果你有
background-color: red !important;
anywhere in your .css files, or <style> elements, that will override inline style eg style="background-color: blue;" .css文件或<style>元素中将覆盖内联样式的任何位置，例如style="background-color: blue;"
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.