This tutorial will show you how to change the font color of text in a div or pretty much any container such as tables and < p > with a mouse click.

Example:
Change to red text or maybe Change to green text

Steps :
1. To achieve the effect in the example above, we need the help of some javascript. The javascript is very simple yet effective. Paste the following script in your page. It can be placed between the < body > tag.

<script language="javascript" type="text/javascript"> //<!-- function wsChangeColor(id, thecolor) { theid = document.getElementById(id); theid.style.color= thecolor; } //--> </script>

The script is a function that will take the div id or table id with the color and replace the color for that div. Sounds confusing? Don't worry, it will become much clearer with the second part of the tutorial.

Our next step is using the above javascript. In this example I will create a normal link and a div that holds some text.

<a href="javascript:;" onclick="wsChangeColor('wscolor', '#ff0000');return false;" title="Change color">Change to red text</a> <br /> <div style="display:block; padding:4px; border:1px solid #CCCCCC;" id="wscolor"><p>This text will be changed to color of the link above. The page will not refresh.</p></div>

The first thing you will notice in my example is how I used the onclick in the < a > tag and also the href contains javascript:;
I used the href="javascript:;" as a way to notify me and others later that this link used is a script and is not a regular link.

The onclick is where the magic happens. If you look closely you will notice that I have used the wsChangeColor('wscolor', '#ff0000');
It is rather easy to figure out what that is doing. the wscolor is the id for the div and the #ff0000 is the red color we want to change the text to when clicked.

That's it! Simple, wasn't it? Place a comment or contact us in the forums if you need help.

 

Consider donating a dollar if you find this tutorial helpful.

Hire Us!Download Video(1)Comments