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">
 
</script></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 Read the rest of this entry »

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