August 18, 2000 - Changing Inline Colors | WebReference

August 18, 2000 - Changing Inline Colors

Yehuda Shiran August 18, 2000
Changing Inline Colors
Tips: August 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

One way to modify an element's appearance on the page is to set its style object's properties. For example, the following element changes its color to tan when moused over:

Mouse over me to see my over color. Then mouse out to see my out color.

<H1 onMouseOver="this.style.color = 'tan';"
 onMouseOut="this.style.color = 'purple';">Mouse over me to see my over color. 
 Then mouse out to see my out color.</H1>

Notice that the text has three colors. The first color is the default color (black) which is being used upon loading (and reloading) of the page. The other two colors ("purple" and "tan") are set by the onMouseOver() and onMouseOut() events.

Learn more about the subject in Column 66, Dynamic Styles.