document.body.style.backgroundColor未定义 [英] document.body.style.backgroundColor is undefined
问题描述
我有一个javascript函数，当用户点击div以获取网页的当前背景颜色（我的笔记本电脑上的白色）时调用该函数：
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:
<div id="div1" onclick="checkbkcolor(id, 1)">Just testing the web page bk color
</div>
这里是checkbkcolor（）函数：
Here is the checkbkcolor() function:
<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>
换句话说：当网页出现时，我的网页背景是白色的document.body.style .backgroundColor未设置。
In other words: my web page background is white when the page appears BUT the document.body.style.backgroundColor is not set.
那么我的网页设置为transparent吗？
So is my web page set to 'transparent'?
我不这么认为。要测试，我添加了以下CSS背景颜色，当网页首次出现时，整个背景为黄色：
I don't think so. To test, I added the following CSS background color and when the web page first appears, the entire background is yellow:
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
}
假设是我对'bgColor'，'background'，'backgroundColor'的研究（4小时值）没有帮助。
My assumption is that my research (4 hours worth) on 'bgColor', 'background', 'backgroundColor' were not helpful.
最重要的是我不明白当我将CSS中的body设置为rgb（255,255,0）时，整个网页背景可能变为黄色，但是以下警告框表示未设置backgroundColor：
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:
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?
编辑：我使用的是最新版本的Firefox 22.0版本
I'm using the latest version of Firefox, version 22.0
推荐答案
您在alert中得到一个空值，因为您在读取值之前没有设置 body 的背景颜色。
You get an empty value in alert, because you haven't set the background color of the body before reading the value. In the second alert it gives you the value, since you've set it.
document.body.style 在 body 中表示 inline 样式，而不是样式表中给定的样式。如果您需要获取当前值，则需要使用 window.getComputedStyle（） 像这样：
document.body.style represents inline styles 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:
bgColor = window.getComputedStyle(document.body, null).getPropertyValue('background-color');
$ b < 或JS风格的camelCase名称：
Note that you can access the style properties with CSS names using getPropertyvalue(), or JS style camelCase names:
var bodyStyle = window.getComputedStyle(document.body, null);
bgColor = bodyStyle.backgroundColor;
fgColor = bodyStyle.color;
...
这篇关于document.body.style.backgroundColor未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
