Javascript: Change text colour dynamically

November 24th, 2008 by admin

In 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 is to allow users to be able to change the colour of the text on the page by clicking an image or a link. Just the same way we allowed them to change the background colour, An example of which can be found here or in the previous post itself.

As we are doing this in Javascript, the first thing we have to do is import our Javascript file again in the header, so we can add our functionality. As we already covered this in the previous post I will just give you the code here to copy and paste or to download as a text file.

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

<head>
 
    <title>Changing Text 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 once again we will work on our Javascript file first. Create a new file called “javascript.js” and Read the rest of this entry »

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

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 »

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