Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

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

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

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
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.


<script language="JavaScript">

function setColor(prop)
  var selColor = document.colorForm.colorSelect.value;

    case ("fgColor"):
      document.fgColor = selColor;      
    case ("bgColor"):
      document.bgColor = selColor;
    case ("linkColor"):
      document.linkColor = selColor;
    case ("alinkColor"):
      document.alinkColor = selColor;
    case ("vlinkColor"):
      document.vlinkColor = selColor;



<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>

<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)">


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:
• Java Script Arithmetic Operators
• Rounding a Number with JavaScript
• The Document Object Model (DOM)
• Compare Two Strings
• JavaScript .big and .small to Change Text Size
• Accessing Web Page Elements
• The Location Object
• Java Script Character Encoding and Decoding
• The if/else Structure
• Define Lines in a String

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-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268