CFHcoder CFHcoder - 1 month ago 21
CSS Question

document.body.style.backgroundColor is undefined

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

Answer

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;
...