Go Around The Tech Corner…

JS Tip 4: How to change background colors with JavaScript

Posted on: November 24, 2009


You can use JavaScript commands with the onClick parameter in the input tags of an html form. Wow! That sounds like a complicated line eh? Lol…so it very easy to have the background color of a page changed on the click of a button. Just read the script below – it’s fairly easy to understand:

<FORM>
 <INPUT value="Change to Yellow!" onClick="document.bgColor='yellow'">
 <INPUT value="Change to Red!" name="button4"> <br>
 <INPUT value="Change back!" name="button5">
</FORM>

When you include this code snippet in your html page, it will display 3 buttons; one to change the background color of the page to yellow, one to red and the third to change it back to the original one we started with, i.e. white. The only piece of JavaScript you need to remember here is the document.bgColor and once you assign it with a value, you have a ready script that works!

Obviously you don’t have to use JavaScript to change the background color of a page, you could specify the color you want in the <body> tag of your html script like this:

<body bgcolor="red">

The purpose of this tutorial was just to demonstrate the use of the JavaScript function document.bgColor.

I hope this tip was helpful. You can leave a comment if you want me to set my feet on other aspects of this wonderful scripting language! I’ll definitely write a post about it and illustrate its use.

–          Millie

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Me – The author of this blog!


This is my tech blog. I got another blog, full of jokes that will crack u up! http://humoraddict.blogspot.com

Follow milliepatel84 on Twitter

Tweet Tweet…!!!!

Blog Stats

  • 43,752 hits

Top Clicks

  • None

Flickr Photos

%d bloggers like this: