One of the simplest operations you can perform on a document is to change the colors of the background and the text. The document object exposes properties that define the colors of the background, the text, and the links.
The color properties available on the document are alinkColor, bgColor, fgColor, linkColor, and vlinkColor. The bgColor property controls the color of the document's background, and the fgColor property controls the default color of the text.
The three link color properties represent the colors of the active, visited, and unvisited links. Link is an ambiguous term—in this case, it refers to an Anchor element that has an HREF attribute set:
<A HREF="myPage.HTM">This is a link.</A>
The active link is the link that has the focus and is normally indicated by a change in color combined with a pale dotted border. A visited link is a link that the user has recently visited, and an unvisited link is a link that has not yet been followed.
Setting the document's properties directly is only one way to control the document's colors. You can also set the colors using attributes in the <BODY> tag or style sheets. If you use the <BODY> tag or style sheet attributes, your code will be more encapsulated, but the color properties on the document object are supported by more browsers.
The following table lists the color properties and their corresponding <BODY> tag attributes.
| Property | Attribute |
| alinkColor | ALINK |
| bgColor | bgColor |
| fgColor | text |
| linkColor | link |
| vlinkColor | vlink |
Style sheets have a higher priority in setting colors than the document's properties or the <BODY> tag's attributes. The document's properties will always reflect the colors shown on the screen. If the color is set using a style sheet, assignments to the document's color properties will be ignored.
All the color properties, including those exposed on elements, take a literal string representing the color name or an RGB hex value. A list of the valid string names and their hexadecimal equivalents can be found on the companion CD. RGB hex values are specified in the following format:
#RRGGBB
R, G, and B stand for the red, green, and blue channels; each channel accepts a valid hexadecimal value in the range 0 through #FF.
When you access the value of one of these properties on the document or on an HTML element, you always get a hexadecimal number, even if you initially supplied a string. For example, a property set with the string Red returns #FF0000. However, the CSS (Cascading Style Sheets) properties retain values as supplied, so a style property set to red returns red.
A large number of color names are now available in HTML. The colors that these names represent are often difficult to decipher, and determining what colors go well together can be a complex task. The following code helps by providing a color selector that sets the background and text colors. All aspects of the color selector are encapsulated in the Div element, so the color selector and its scripts can easily be moved and run unchanged in other HTML documents.
<HTML>
<HEAD>
<TITLE>HTML-Based Color Selector</TITLE>
<STYLE TYPE="text/css">
TABLE {background:white}
/* Make all cells a uniform size. */
TD {width:30pt; height:30pt; cursor:default}
</STYLE>
</HEAD>
<BODY>
<H1>Color Selector</H1>
<!— When the user clicks on the cell, the screen is redrawn
with the corresponding background or text color. —>
<DIV ONCLICK="colorSelector()">
<SCRIPT LANGUAGE="JavaScript">
function colorSelector() {
// Based on the table, change to the correct color.
// srcElement is the element the user clicked on.
if ("TD" == event.srcElement.tagName)
if (document.all.Text.contains(event.srcElement))
document.fgColor = event.srcElement.bgColor;
else if (document.all.Background.contains(
event.srcElement))
document.bgColor = event.srcElement.bgColor;
}
</SCRIPT>
<!— To extend these tables, add cells to the background
and/or the text color tables. Each cell consists of a
background color only, set appropriately. —>
<TABLE ID="Background" BORDER>
<CAPTION>Background Color</CAPTION>
<TR>
<TD BGCOLOR=Black></TD><TD BGCOLOR=Red></TD>
<TD BGCOLOR=Green></TD><TD BGCOLOR=LightBlue></TD>
<TD BGCOLOR=Yellow></TD>
</TR>
<TR>
<TD BGCOLOR=YellowGreen></TD><TD BGCOLOR=Orange></TD>
<TD BGCOLOR=Navy></TD><TD BGCOLOR=Magenta></TD>
<TD BGCOLOR=Brown></TD>
</TR>
<TR>
<TD BGCOLOR=Black></TD><TD BGCOLOR=Blue></TD>
<TD BGCOLOR=Burlywood></TD><TD BGCOLOR=Gold></TD>
<TD BGCOLOR=Cyan></TD>
</TR>
</TABLE>
<TABLE ID="Text" BORDER>
<CAPTION>Text Color</CAPTION>
<TR>
<TD BGCOLOR=Black></TD><TD BGCOLOR=Red></TD>
<TD BGCOLOR=Green></TD><TD BGCOLOR=LightBlue></TD>
<TD BGCOLOR=Brown></TD>
</TR>
<TR>
<TD BGCOLOR=White></TD><TD BGCOLOR=Blue></TD>
<TD BGCOLOR=Burlywood></TD><TD BGCOLOR=Gold></TD>
<TD BGCOLOR=Cyan></TD>
</TR>
</TABLE>
</DIV>
</BODY>
</HTML>
The color selector works by enclosing the two tables in a DIV element and using event bubbling to detect all click events. When the user clicks in the DIV element, the click event handler checks whether the click occurred in a cell of one of the two tables. If the click occurred in a cell, the event handler first determines whether the cell is in the background table or text table and then changes the corresponding document color to match the color of the clicked cell.
The preceding code contains only a subset of the available colors, but the selection can easily be expanded by simply adding extra cells to either the background color or the text color table.
The attributes of all HTML elements in a document are exposed as properties in the object model. You can set an attribute in an HTML tag, or you can set the corresponding property. If you do both, the assignment specified through script is the one that is displayed. For example, the script in the following code sets the background color to Red; subsequently setting the corresponding attribute in the <BODY> tag to Blue fails to change the color:
<HTML> <SCRIPT LANGUAGE="JavaScript"> document.bgColor = "Red"; </SCRIPT> <BODY BGCOLOR="Blue"> The page background is red. </BODY> </HTML>