document.body.style.backgroundColor is undefined

2020-02-06 03:57发布

站内问答 / JavaScript
1219 4 5

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>

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>

In other words: my web page background is white when the page appears BUT the document.body.style.backgroundColor is not set.

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 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
 }

My assumption is that my research (4 hours worth) on 'bgColor', 'background', 'backgroundColor' were not helpful.

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?

EDIT: I'm using the latest version of Firefox, version 22.0

4条回答
Explosion°爆炸
2楼-- · 2020-02-06 04:43

In short, the style property 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.

查看更多
0人赞 添加讨论(0) 举报
够拽才男人
3楼-- · 2020-02-06 04:46

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 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');

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;
...
查看更多
0人赞 添加讨论(0) 举报
唯我独甜
4楼-- · 2020-02-06 05:00

I think it is because the .style can only access the inline style property. So if you assign <body style="background-color: yellow;"> your script can work well.

查看更多
0人赞 添加讨论(0) 举报
看我几分像从前
5楼-- · 2020-02-06 05:00

Change the css to

 #div1
  {
     background-color: rgb(255,255,0);
  }

and try

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)