Ken Ward's New Java Script Tutorial

This page demonstrates how to change the colour of text on a page using "color" instead of "fgColor"


In the last lesson we had java script changing the background colour of the document. Not surprisingly, in this one, we have it changing the text. Try clicking the boxes to see what happens.

 

 

This is extremely easy because all we do is change the "backgroundColor" to "color" in the previous lesson! So the one line of code (for each colour) is:

document.body.style.color="red";

And this changes the text in the document to, er, red!

The rest of the code is more or less the same as before with backgroundColor replaced with color.

<html>

<head>

<title>

Changing foreground colour in java script with style color instead of fgColor

</title>

<script type="text/javascript">

<!--

function red()

{

document.body.style.color="red";

}

function blue()

{

document.body.style.color="blue"

}

function fuchsia()

{

document.body.style.color="fuchsia"

}

function yellow()

{

document.body.style.color="yellow"

 

}

function black()

{

document.body.style.color="black"

}

// -->

</script>

</head>

<body>

<table class="tabler" border="0" cellpadding="5" cellspacing="0">

<tr>

<td style="background-color:red">

<a href="#" onclick="red()">

red

</a>

</td>

<td style="background-color:#9B9BFF">

<a href="#" onclick="blue()">

blue

</a>

</td>

</tr>

<tr>

<td style="background-color:#ff00ff">

<a href="#" onclick="fuchsia()">

fuchsia

</a>

</td>

<td style="background-color:yellow">

<a href="#" onclick="yellow()">

yellow

</a>

</td>

</tr>

</table>

</center>

</div>

<p>

&nbsp;

</p>

<form>

<p>

<input type="button" value="Back to black text!" name="B1" id="B1" onclick="black()" />

</p>

</form>

<p>

Some Text

</p>

</body>

</html>

We have done a lot of clicking, so let's take a rest and do on mouse over code!


[If you need to learn more about HTML visit the HTML Tutorial]

I am always pleased to hear from you.
Send your comments to