javascript document.body.style.backgroundColor 未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17588801/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
document.body.style.backgroundColor is undefined
提问by CFHcoder
I have a javascript function that is called when the user clicks a div to get the current background color (white on my laptop) of the web page:
我有一个 javascript 函数，当用户单击 div 以获取网页的当前背景颜色（笔记本电脑上的白色）时调用该函数：
<div id="div1" onclick="checkbkcolor(id, 1)">Just testing the web page bk color
</div>
Here is the checkbkcolor() function:
这是 checkbkcolor() 函数：
<head>
<script type="text/javascript">
// DOES NOTHING SO I COMMENTED IT OUT: document.body.style.backgroundColor = "red";
function checkbkcolor(id, val)
{
// THIS RETURNS NOTHING FOR THE COLOR -- the alert box
// only says "the document.body.style.backgroundColor is: "
// and nothing else
alert("the document.body.style.backgroundColor is: "
+ document.body.style.backgroundColor);
document.body.style.backgroundColor = "red";
// The alert box now shows 'red' for the color name, *AND*
// the web page's background has turned all red
alert("the document.body.style.backgroundColor is: "
+ document.body.style.backgroundColor);
}
</script>
</head>
In other words: my web page background is white when the page appears BUT the document.body.style.backgroundColor is not set.
换句话说：当页面出现时，我的网页背景是白色的，但没有设置 document.body.style.backgroundColor 。
So is my web page set to 'transparent'?
那么我的网页是否设置为“透明”？
I don't think so. To test, I added the following CSS background color and when the web page firstappears, the entire background is yellow:
我不这么认为。为了测试，我添加了以下 CSS 背景颜色，当网页第一次出现时，整个背景是黄色的：
body
{
background-color: rgb(255,255,0);
}
Now when my web page appears, it is no longer white (or transparent, whatever). The web page is yellow when it appears.
现在，当我的网页出现时，它不再是白色的（或透明的，无论如何）。网页出现时是黄色的。
AND STILL. The following code shows the background color is not set:
还是。以下代码显示未设置背景颜色：
function checkbkcolor(id, region)
{
// THIS RETURNS NOTHING FOR THE COLOR
alert("the document.body.style.backgroundColor is: "
+ document.body.style.backgroundColor);
// same code other as above
}
My assumption is that my research (4 hours worth) on 'bgColor', 'background', 'backgroundColor' were not helpful.
我的假设是我对“bgColor”、“background”、“backgroundColor”的研究（价值 4 小时）没有帮助。
Most of all I don't understand how the entire web page background can come up yellow when I set the 'body' in CSS to rgb(255,255,0) and yet the following alert box says the backgroundColor is NOT SET:
最重要的是，我不明白当我将 CSS 中的“body”设置为 rgb(255,255,0) 时，整个网页背景如何变成黄色，但以下警告框表示未设置 backgroundColor：
alert("the document.body.style.backgroundColor is: "
+ document.body.style.backgroundColor);
I need to know, when the page first appears, what the background color is. How?
我需要知道，当页面第一次出现时，背景颜色是什么。如何？
EDIT: I'm using the latest version of Firefox, version 22.0
编辑：我使用的是最新版本的 Firefox，版本 22.0
回答by Teemu
You get an empty value in alert, because you haven't set the background color of the bodybefore reading the value. In the second alert it gives you the value, since you've set it.
您在 alert 中得到一个空值，因为您body在读取值之前还没有设置 的背景颜色。在第二个警报中，它为您提供了值，因为您已经设置了它。
document.body.stylerepresents inlinestyles in the body, not the style given in the stylesheet. If you need to get current values, you need to use window.getComputedStyle()like this:
document.body.style表示 中的内联样式，而body不是样式表中给出的样式。如果需要获取当前值，则需要window.getComputedStyle()像这样使用：
bgColor = window.getComputedStyle(document.body, null).getPropertyValue('background-color');
Note that you can access the style properties with CSS names using getPropertyvalue(), or JS style camelCase names:
请注意，您可以使用 CSS 名称访问样式属性getPropertyvalue()，或者使用JS 样式驼峰命名：
var bodyStyle = window.getComputedStyle(document.body, null);
bgColor = bodyStyle.backgroundColor;
fgColor = bodyStyle.color;
...
回答by marekful
In short, the styleproperty of HTMLElement instances references inline style definitions and those added via JS (elem.style[prop] = value). You can however access CSS properties in JS via the document.defaultView.getComputedStyle.
简而言之，styleHTMLElement 实例的属性引用内联样式定义和通过 JS ( elem.style[prop] = value)添加的那些。但是，您可以通过 .js 文件访问 JS 中的 CSS 属性document.defaultView.getComputedStyle。
回答by zhangyangyu
I think it is because the .stylecan only access the inline styleproperty. So if you assign <body style="background-color: yellow;">your script can work well.
我认为这是因为.style只能访问内联style属性。所以如果你分配<body style="background-color: yellow;">你的脚本可以很好地工作。
回答by Arun Bertil
Change the css to
将css更改为
#div1
{
background-color: rgb(255,255,0);
}
and try
并尝试
