Entry
How can I change the text color of the whole document?
How can I change the text color of the whole document?
Apr 27th, 2000 03:04
Rey Nuņez, Martin Honnen,
Only IE4/5 and NN6 provide full DOM access to allow that. Here you just
script
document.fgColor = 'lime';
so for instance the following works with IE4/5 and NN6:
<SCRIPT>
var colors = new Array ('lime', 'red', 'blue', 'yellow');
var c = 0;
</SCRIPT>
</HEAD>
<BODY>
<P>
Kibology for all
</P>
<A HREF="javascript: void 0"
ONCLICK="c = ++c % colors.length; document.fgColor = colors[c];
return false">
change color
</A>
</BODY>
With NN4 you would need to set up different layers with the same
content but with different colors where you then change visibility of
the layers as needed:
<HTML>
<HEAD>
<STYLE>
.bodyLayer { position: absolute; visibility: hidden; }
#lime { color: lime; visibility: visible; }
#red { color: red; }
#blue { color: blue; }
#yellow { color: yellow; }
</STYLE>
<SCRIPT>
var colors = new Array ('lime', 'red', 'blue', 'yellow');
var c = 0;
function changeColorLayer () {
if (document.layers)
document[colors[c]].visibility = 'hide';
else if (document.all)
document.all[colors[c]].style.visibility = 'hidden';
else if (document.getElementById)
document.getElementById(colors[c]).style.visibility = 'hidden';
c = ++c % colors.length;
if (document.layers)
document[colors[c]].visibility = 'show';
else if (document.all)
document.all[colors[c]].style.visibility = 'visible';
else if (document.getElementById)
document.getElementById(colors[c]).style.visibility = 'visible';
}
</SCRIPT>
</HEAD>
<BODY>
<DIV ID="lime" CLASS="bodyLayer">
<P>
Kibology for all
</P>
<A HREF="javascript: void 0"
ONCLICK="changeColorLayer(); return false">
change color
</A>
</DIV>
<DIV ID="red" CLASS="bodyLayer">
<P>
Kibology for all
</P>
<A HREF="javascript: void 0"
ONCLICK="changeColorLayer(); return false">
change color
</A>
</DIV>
<DIV ID="blue" CLASS="bodyLayer">
<P>
Kibology for all
</P>
<A HREF="javascript: void 0"
ONCLICK="changeColorLayer(); return false">
change color
</A>
</DIV>
<DIV ID="yellow" CLASS="bodyLayer">
<P>
Kibology for all
</P>
<A HREF="javascript: void 0"
ONCLICK="changeColorLayer(); return false">
change color
</A>
</DIV>
</BODY>
</HTML>
~ ~ ~
There is one other way that will work in IE4+/NN6+, using the body.text
property, and though has been deprecated, is still supported.
<div align="center"><p>Clicking the buttons below will change the body
text color.</p>
<button onclick="document.body.text='red'">Red</button>
<button onclick="document.body.text='green'">Green</button>
<button onclick="document.body.text='blue'">Blue</button></div>
