The "Right" Way to Change Background Color

Boder

07-08-2004, 04:27 AM

Hello, new user here!

I have been getting into JavaScript, and at this point it seems basically everything useful you do with it uses the DOM, so I figure I'd post here.

I am changing the background color of my page. I have found a few ways to do it but I'm wondering which is the "right" way. My page is Strict XHTML so I don't really want to break that.

document.bgColor = 'red';
doesn't work with a css stylesheet defined like so...
body { background-color: black; }

It seems necessary to change the background when stylesheets are applied by actually changing the stylesheet instead of the document itself:

var theRules = new Array();

if (document.styleSheets[0].cssRules)
theRules = document.styleSheets[0].cssRules
else if (document.styleSheets[0].rules)
theRules = document.styleSheets[0].rules

theRules[0].style.backgroundColor = 'red';

i can use the ( document.bgColor = 'red'; ) if I use the depreciated attribute 'bgcolor' of the 'body' tag. But I do not want to this.

The last option available is to do neither and simply run a script that chooses the background color when the page loads.

Which brings me to another question :thumbsup:
How do you run scripts when a page loads? Right now I just run the appropriate script functions after all the HTML content and before the ending </body> tag, because many functions use the DOM and reference certain tags. Is this fine?

Thanks to anyone with helpful words.

Boder

07-08-2004, 06:58 AM

Hi, it's me again.

Since the CSS control with JavaScript isn't really up to snuff at the moment (i.e. IE) , I've gone with the third way. Neither FireFox nor IE could modify the background color when it was set in CSS. IE explorer was glitchy when modifying the background color when changing my stylesheet. And, rather than using outdated attributes like 'bgColor' I do all of my background-color changing with a simple JavaScript function.

BTW I also figured out IE doesn't support fixed position. What a bummer! I guess you can't tell how IE is lacking until you start working with it as a web developer.

Willy Duitt

07-08-2004, 07:14 AM

Boder

07-08-2004, 08:01 AM

Guess there's more than a few ways to do something!

Thanks for the reply, your way is the best. It overrides the settings in my stylesheet!

Boder

07-08-2004, 08:15 PM

To anyone reading this that might not know, I think I've found the answer to my script question that I wanted to execute when the page loads.

Before I was simply placing the script at the end of the body section so that it would execute after the page had loaded, but I think that the more correct way to do it is to use the event attribute 'onload' for the body tag.

Like so:

<body onload="javscript:functions">

stuff

</body>

Again, correct me if this isn't the right way! :)

Boder

07-08-2004, 08:23 PM

After the correction, I did some tests with Firefox and Internet Explorer.

Firefox worked fine, but Internet Explorer was painfully slow ( I mean slow ) in executing the script in the 'onload' attribute. So I'm back to inlining my script.

<body>

stuff

<script type="text/javascript">

</script>
</body>

I don't know which way is correct, but I certainly know which way works.

Willy Duitt

07-08-2004, 11:42 PM

body.onload will not fire your function until the page has completely loaded. Therefore, if you have large byte images the function will not be called until they are loaded.....

But why are you declaring one color in your styles and then want to change it thru script?

SpiritualStorms

07-09-2004, 03:12 AM

Well, looks like i was not alone on the whole syntax thing with regards to the alteration of a particular properties value.

subhailc

07-12-2004, 11:21 AM

anytime you have hyphens in markup, it becomes alternatingCase in javascript

background-image = backgroundImage

SpiritualStorms

07-14-2004, 08:43 AM

In a different thread, or post, i had said the same thing about how there seems to be a discrepancy between the bgcolor property, and the background property of the document object. It seemed that for one instance, you could get away with just saying,

document.bgcolor="whatever color"

but in another instance, you had to do something like,

document.body.style.background = "whatever color";

otherwise, it would not work at all.

Strange, isnt it?

At any rate, the term body is actually a Microsoft property, and not necessarily a Netscape property. And the style, well, i think thats self-explanatory. Its the property/object by which you connect to the CSS definitions that have been set for a particular tag.

I am not sure if you would be interested, but the function i use for something like the background image of a document goes something like this,

function imageFlips( paramOne, paramTwo)
{
if(document.images)
{
document.images.[paramOne].src=paramTwo;
}
else
{
alert("There's no image by the name of "+paramOne);
}
}

To call the function, i would do something like this,

<br>
<a href="#" onMouseOver="imageFlips( 'flower' , 'triangle.bmp') ; " >
<img id="flower" src="flower.bmp">
</a>
<br>

At any rate, the above seems to work for Internet Explorer.