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:

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>

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>

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>

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>

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>

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

Produced by Yehuda Shiran and Tomer Shiran

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

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