Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

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.

More Java Script Code:
• Search and Replace Strings
• The for Loop
• Java Script Character Encoding and Decoding
• The Browsers History Object
• Define Lines in a String
• Rounding a Number with JavaScript
• Comparison Operators
• The break Statement
• Java Script Math.cos Method
• Java Script Number Object