Javascript: Changing background colour dynamically

November 21st, 2008 by Ian O'Donnell

During the completion of a recent project I was working on I had to learn something I didn’t do before, this was allowing the user to change the colour of a html web page on the fly without reloading. It was actually quite tough to find the information I needed based on the method I wanted to use so I thought I would share the information here and give you an example of it too.

This works across all browsers but I am by no means saying this is the only or best or easiest way but it works and works well.

Ok first in our tag we’re just going to load our javascript file, easy if you have done it before, if not, it is quite similar to loading an external css file. So the code in our tag is as follows:

?Download headerCode.txt
1
2
3
4
5
6
7

<head>
 
    <title>Changing Colour</title>
 
    <script style="text/javascript" type="text/javascript" src="javascript.js">
 
</head>

In the example above, our page is called “Changing Colour”, our Javascript file is called “javascript.js and is stored in the same folder as our page. Also, we don’t have a css file but that’s not important for this example.

Ok so before we start on the page itself let’s just sort our Javascript file, create a new file called “javascript.js” and open it in Notepad or whatever Editor you use. Now here, and for the project where I did this, we will use a limited number of set colours. The reason for this was because we needed colours that would contrast the text there were only 6 colours we wanted them to have. For simplicities sake in this example we will use three.

Bearing in mind that we have a set list of colours here is the Javascript file and it will be followed with an explanation.

?Download javascriptCode.txt
1
2
3
4
5
6
7
8
9

var backColour = new Array();
 
backColour[0] = '#00f0ff';
backColour[1] = '#00ff1f';
backColour[2] = '#e4ff00';
 
function changeBG(whichColour){
		document.body.style.backgroundColor = backColour[whichColour];
}

In line one we create a new array to store our colours, we then put our colours into the array. Here I used blue, green and yellow.

After this, in our function named changeBG, which takes in a variable called whichColour, we change the body colour (document.body.style.backgroundcolor) to one of the colours in our array, defined by whatever was passed in to the backColour function so in our example, if 0 was passed in the page would be blue, 1 would change the page to green and so on.

That concludes our external code in this example, all that’s left is to finish our page itself. The way i have completed it here is with 3 images, a blue, green and yellow, when the user clicks on them the page changes. It can be done with text links or you could make an image map etc, there are many applications of this method. For ease of use I named the images the colour that they are, and here is the code that I have in the section of our page.

?Download javascriptCode.txt
1
2
3

<a href="#" onclick="javascript:changeBG(0);"><img src="images/blue.jpg" alt="blue" /></a>
<a href="#" onclick="javascript:changeBG(1);"><img src="images/green.jpg" alt="green" /></a>
<a href="#" onclick="javascript:changeBG(2);"><img src="images/yellow.jpg" alt="yellow" /></a>

So simply, the images are links, when the user clicks on them it calls our changeBG function and passes in a number corresponding to the array in the Javascript file from earlier.

That’s it, you can see a working example of this here.

To make it easy to you to try out for yourself here is the complete html file, the complete Javascript file is earlier in the post. Just make sure they are in the same folder.

?Download pageCode.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<html>
  <head>
 
    <title>Changing Colour</title>
 
    <script style="text/javascript" type="text/javascript" src="javascript.js">
 
 
 
  </head>
 
  <body>
 
   <a href="#" onclick="javascript:changeBG(0);"><img src="images/blue.jpg" alt="blue" /></a>
   <a href="#" onclick="javascript:changeBG(1);"><img src="images/green.jpg" alt="green" /></a>
   <a href="#" onclick="javascript:changeBG(2);"><img src="images/yellow.jpg" alt="yellow" /></a>
 
  </body>
</html>

So that’s it, I will follow this up with a post about changing the font colour of the page and hopefully then show you a simple way to use cookies to store a users colour preferences between pages :)

[ad#ad-1]

, , , , , , , , , , , , , , , , ,

3 Responses to “Javascript: Changing background colour dynamically”

  1. Javascript: Change text colour dynamically | Random Musings Says:
    November 24th, 2008 at 9:56 pm

    [...] the wake of my previous post “Javascript: Changing background colour dynamically“, I am going to put together a similarly styled post with the same method of control. Our aim [...]

  2. Gymnricykaria Says:
    September 20th, 2009 at 1:07 pm

    entertainment Laban, hasten to continuing.

  3. Brandon Palakiko Says:
    June 8th, 2010 at 3:23 pm

    Very good piece of content, this is very similar to a site that I have. Please check it out sometime and feel free to leave me a comenet on it and tell me what you think. Im always looking for feedback.

Leave a Reply