Welcome to Bucaro TecHelp!

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

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Interactively Set Webpage Colors

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
fgColorForeground
bgColorBackground
linkColorLinks
alinkColorActive Link
vlinkColorVisited 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:
• Interactively Set Webpage Colors
• Find a Character or a Substring Within a String
• The Conditional Operator
• Java Script Number Object
• JavaScript Character Escape Sequences
• Comparison Operators
• Using the Java Script eval() Function
• Use moveBy Method to Move Window by a Specific Offset
• Format a Number as Currency
• Accessing Web Page Elements

RSS Feed RSS Feed



Follow Stephen Bucaro Follow @Stephen Bucaro


Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268