لطفا منتظر باشید ...
11.8 Toggling Between Style Sheets for an Element
NN 6, IE 4
11.8.1 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.
11.8.2 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>
Adjusting the className property of an element as
shown here is a more stable approach for early versions of Netscape 6
instead of manipulating styleSheet objects and
their properties. It is perhaps the most widely used and supported
way to implement dynamic styles.
11.8.3 Discussion
If you are toggling the style for just a single element, you might be
tempted to use the id attribute and ID selector as
your switch point, rather than the class attribute
and selector. But an element's id
attribute should not change unless absolutely necessary.
When a script reassigns a style sheet rule to an element, none of the
CSS properties from the previous setting are inherited by the newly
assigned rule. In the preceding example, the rule with the
hilited class selector sets the
text-decoration property to underline the
element's text. But when the
unhilited rule is reapplied to the element, the
element automatically reverts to the previous value of the
text-decoration property that the element
inherited from the browser's default style sheet.
11.8.4 See Also
Recipe 11.7 for enabling or disabling a style sheet.
