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">
 
</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 open it in Notepad or whatever Editor you use. Now here, we are only going to use a limited number of colours. We used 3 when we were changing the pages background colour so this time we will use 3 as well to keep it even for later in this series.

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 textColour = new Array();
 
textColour[0] = '#00f0ff';
textColour[1] = '#00ff1f';
textColour[2] = '#e4ff00';
 
function changeTxt(whichColour){
		document.body.style.color = textColour[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 changeTxt, which takes in a variable called whichColour, we change the body colour (document.body.style.color) to one of the colours in our array, defined by whatever was passed in to the backText 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. And of course let’s not forget to put some sample text in there so we can take a look.

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

<a href="#" onclick="javascript:changeTxt(0);"><img src="images/blue.jpg" alt="blue" /></a>
<a href="#" onclick="javascript:changeTxt(1);"><img src="images/green.jpg" alt="green" /></a>
<a href="#" onclick="javascript:changeTxt(2);"><img src="images/yellow.jpg" alt="yellow" /></a>
 
<p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat.
</p>

So simply, the images are links, when the user clicks on them it calls our changeTxt 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
20
21
22
23
24
25

<html>
  <head>
 
    <title>Changing Text Colour</title>
 
    <script style="text/javascript" type="text/javascript" src="javascript.js">
 
 
 
  </head>
 
  <body>
 
   <a href="#" onclick="javascript:changeTxt(0);"><img src="images/blue.jpg" alt="blue" /></a>
   <a href="#" onclick="javascript:changeTxt(1);"><img src="images/green.jpg" alt="green" /></a>
   <a href="#" onclick="javascript:changeTxt(2);"><img src="images/yellow.jpg" alt="yellow" /></a>
 
   <p>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
     et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
     aliquip ex ea commodo consequat.
    </p>
 
  </body>
</html>

So that’s it, hope you learned something or that it helped on some level. I will follow this up with a post about changing the font size on a page using Javascript without reloading the page and then a simple way to use cookies to store a users colour preferences between pages :)

[ad#ad-1]

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

3 Responses to “Javascript: Change text colour dynamically”

  1. Zashkaser Says:
    August 5th, 2009 at 4:27 pm

    Fantastic news! :)

  2. Mayme Crookshanks Says:
    March 5th, 2010 at 1:40 am

    Hey, I came across this article while searching for help with JavaScript. I have recently switched browsers from Chrome to Microsoft Internet Explorer 5. After the change I seem to have a issue with loading JavaScript. Everytime I go on a site that requires Javascript, my browser doesn’t load and I get a “runtime error javascript.JSException: Unknown name”. I can’t seem to find out how to fix it. Any help is very appreciated! Thanks

  3. Ian O'Donnell Says:
    March 10th, 2010 at 3:21 pm

    Internet Explorer 5 is over 10 years old. That might be the problem :P

Leave a Reply