• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

11. Managing Style Sheets > 11.8. Toggling Between Style Sheets for an Element

Toggling Between Style Sheets for an Element

NN 6, IE 4

Problem

You want to swap style sheets for an element based on user action, such as rolling the mouse over a hot spot or clicking on an arbitrary element.

Solution

First, define two style sheet rules, each with a different class selector. Then design an event handler for the element to change the element’s className property to the desired class selector’s identifier:

<style type="text/css">
.unhilited {background-color:white}
.hilited {background-color:yellow; text-decoration:underline}
</style>
...
<script type="text/javascript">
function setHilite(evt) {
    evt = (evt) ? evt : ((window.event) ? window.event : null);
    if (evt) {
        var elem = (evt.srcElement) ? evt.srcElement : evt.target;
        elem.className = "hilited";
    }
}
function setUnHilite(evt) {
    evt = (evt) ? evt : ((window.event) ? window.event : null);
    if (evt) {
        var elem = (evt.srcElement) ? evt.srcElement : evt.target;
        elem.className = "unhilited";
    }
}
...
<span class="unhilited" onmouseover="setHilite(event)" 
    onmouseout="setUnHilite(event)">Some potentially hot spot text.</span>

PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint