|
Interactively Set Webpage Colors
By Stephen Bucaro
The document object encompasses everything inside the browser window.
The document object's fgColor, bgColor, linkColor, alinkColor, and
vlinkColor properties can be used to set colors in a webpage interactively.
The latest browsers treat html elements on a webpage as nodes in a hierarchical
tree with the document object as the root node. In that case, you would expect
the BODY element to be a child node of the document object and all the html
elements in the webpage to belong to the BODY element. In older browsers the
document object directly controls the properties of elements within the webpage,
bypassing the BODY element. In the latest browsers, the fgColor, bgColor,
linkColor, alinkColor, and vlinkColor become properties of the BODY element,
while still being accessible as properties of the document object.
Below is a list of the document properties and the colors they set.
| Property | Color |
| fgColor | Foreground |
| bgColor | Background |
| linkColor | Links |
| alinkColor | Active Link |
| vlinkColor | Visited Links |
A link is "active" during the period between when you click on it and when the
target webpage takes control of the browser window. You may never actually see
the alinkColor color.
Below is the code for an example that lets you set these properties interactively.
<html>
<head>
<script language="JavaScript">
function setColor(prop)
{
var selColor = document.colorForm.colorSelect.value;
switch(prop)
{
case ("fgColor"):
document.fgColor = selColor;
break;
case ("bgColor"):
document.bgColor = selColor;
break;
case ("linkColor"):
document.linkColor = selColor;
break;
case ("alinkColor"):
document.alinkColor = selColor;
break;
case ("vlinkColor"):
document.vlinkColor = selColor;
}
}
</script>
</head>
<body>
<a target="top" href="http://bucarotechelp.com">Bucaro TecHelp</a>
<form name="colorForm">
Select a Color:
<select name="colorSelect">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="white">White</option>
</select>
<br />
Apply to:
<input type="button" value="fgColor" onclick="setColor(this.value)">
<input type="button" value="bgColor" onclick="setColor(this.value)">
<br />
<input type="button" value="linkColor" onclick="setColor(this.value)">
<input type="button" value="alinkColor" onclick="setColor(this.value)">
<input type="button" value="vlinkColor" onclick="setColor(this.value)">
</form>
</body>
</html>
To use the example, select a color in the drop-down list, then click on a button
for the property you want to set. That property will immediately be set. Of course
you won't be able to see the vlinkColor until you actually click on the link
to visit the target webpage (or conversely you wont be able to see the linkColor
if the link points to a webpage that you have already visited.
In addition to demonstrating how to set these document properties, this example
shows you how to use Java Script to access an html select list in a form
and how to use a Java Script switch/case structure.
| 
Free Downloads
RSS Feed