Dynamic Styles: Changing Styles using CLASSes | WebReference

Dynamic Styles: Changing Styles using CLASSes


Dynamic Styles

Changing Styles using Classes

CSS attributes can also be specified in the page's style sheet. You can modify styles dynamically by changing the element's class. Let's implement the color changing example from Page 3:

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

Here is the html code:

<STYLE>
.textTan {color: tan}
.textPurple {color: purple}
</STYLE>
<H1 onMouseOver="this.className = 'textTan';"
 onMouseOut="this.className = 'textPurple';">Mouse over me to
 see my over color. Then mouse out to see my out color.
</H1>

This is the time to explain the concept of style assignment priority. You can define an element's style in many different ways. There is a pre-defined priority order between these methods. An element's own scripting always has the highest priority. Its own inline STYLE is next and own inline CLASS is after that. Inherited scripting, STYLE, and CLASS are in lower priority, in this order. The following examples demonstrate this concept:

Notice the style assignment hierarchy: setting color by inherited CLASS

Here is the HTML code for the example above:

<DIV CLASS="textBlue">
  <SPAN>
    Notice the style assignment hierarchy: setting color by
    inherited CLASS
  </SPAN>
</DIV>
Notice the style assignment hierarchy: setting color by inherited inline STYLE

Here is the HTML code for the example above:

<DIV CLASS="textBlue" STYLE="color: red">
  <SPAN>
    Notice the style assignment hierarchy: setting color by
    inherited inline STYLE
  </SPAN>
</DIV>
Notice the style assignment hierarchy: setting color by inherited scripting

Here is the HTML code for the example above:


<DIV CLASS="textBlue" STYLE="color: red"
  onMouseOver="this.style.color = 'tan'"
  onMouseOut="this.style.color = 'purple'">
  <SPAN>
    Notice the style assignment hierarchy: setting color by
    inherited scripting
  </SPAN>
</DIV>
Notice the style assignment hierarchy: setting color by own CLASS

Here is the HTML code for the example above:


<DIV CLASS="textBlue" STYLE="color: red"
  onMouseOver="this.style.color = 'tan'"
  onMouseOut="this.style.color = 'purple'">
  <SPAN CLASS="textYellow">Notice the style assignment hierarchy:
    setting color by own CLASS
  </SPAN>
</DIV>
Notice the style assignment hierarchy: setting color by own inline STYLE

Here is the HTML code for the example above:


<DIV CLASS="textBlue" STYLE="color: red"
  onMouseOver="this.style.color = 'tan'"
  onMouseOut="this.style.color = 'purple'">
  <SPAN CLASS="textOrange" STYLE="color: magenta">
    Notice the style assignment hierarchy: setting color by own
    inline STYLE
  </SPAN>
</DIV>
Notice the style assignment hierarchy: setting color by own scripting

Here is the HTML code for the example above:


<DIV CLASS="textBlue" STYLE="color: red"
  onMouseOver="this.style.color = 'tan'"
  onMouseOut="this.style.color = 'purple'">
  <SPAN CLASS="textOrange" STYLE="color: magenta"
    onMouseOver="this.style.color = 'green'"
    onMouseOut="this.style.color = 'brown'">
    Notice the style assignment hierarchy: setting color by
    own scripting
  </SPAN>
</DIV>

A Final Word

http://www.internet.com

Produced by Yehuda Shiran and Tomer Shiran

Created: August 14, 2000
Revised: August 14, 2000

URL: http://www.webreference.com/js/column66/***PASTE FILENAME HERE***