Changing the class Attribute
Changing the inline style is useful, but it can be a burdensome technique
when multiple property values need to be modified. A more effective way to
change styles is to define styles for two or more classes in a global style sheet and
dynamically change the class attribute of an element. The
class attribute of an element is exposed through the
className property. This property can be changed through script to associate a different style rule with the element.
For example, the following code rewrites the simple
onmouseover color change technique from the previous section to take advantage of global style sheets:
<HTML>
<HEAD>
<TITLE>Changing the class Attribute</TITLE>
<!-- Create a global style sheet. -->
<STYLE TYPE="text/css">
.yellow {background:yellow; font-weight:bolder}
</STYLE>
</HEAD>
<BODY>
<H1 ONMOUSEOVER="this.className = `yellow';"
ONMOUSEOUT="this.className = ``;">
This element changes its class attribute
when the mouse moves over it.
</H1>
</BODY>
</HTML>
In this example, when the mouse passes over the H1 element, the value of
the CLASS attribute is changed to yellow. This causes the style specified for
yellow to be immediately applied. In this case, the background becomes yellow
and the text is made bold. The technique of changing class names offers two
advantages: multiple parts of the style can be changed with a single line of
code, and changing the style sheet rather than changing the code can modify
the effect itself. This technique is extremely useful when you want a
predefined effect, especially when the effect is to be shared across multiple elements.
You can make controls dynamic by using the same technique. Code in
the following example changes the style sheet associated with a button in
response to four mouse events: the mouse moving over and leaving the element and
the left mouse button being clicked and being released.
<HTML>
<HEAD>
<TITLE>Animated Buttons</TITLE>
<STYLE TYPE="text/css">
.over {color:yellow; background:navy}
.down {color:yellow; background:navy; font-style:italic}
</STYLE>
</HEAD>
<BODY>
<INPUT TYPE=BUTTON VALUE="Demo Button"
ONMOUSEOVER="this.className = `over';"
ONMOUSEOUT="this.className = ``;"
ONMOUSEDOWN="this.className = `down';"
ONMOUSEUP="this.className = `over';">
</BODY>
</HTML>
This example can be extended for other events and other elements and
can also be written generically by placing the event handlers in the Body element.
If you give the button in the previous example a new default style by
assigning it a class name, you have to be careful to reassign that class name in
response to the onmouseout event. Code in the next example automatically keeps
track of elements' original class names. It demonstrates a reusable architecture
for assigning different onmouseover effects to different elements, including
nested elements, with only a small amount of code for each element.
<HTML>
<HEAD>
<TITLE>Exploding Effects</TITLE>
<STYLE TYPE="text/css">
.explode {color:red; letter-spacing:5px}
.header {color:green}
/* To add effects, simply define new rules and associate them
with elements in the document. */
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function walkStyles(src) {
/* Walk up the tree; for every element with an effect
property, swap the values of its effect and className
properties. The tree walk is necessary to ensure that
any nested effects are handled. */
while ("HTML" != src.tagName) {
if (null != src.getAttribute("effect", false)) {
var tempClass = src.className;
src.className = src.getAttribute("effect", false);
src.setAttribute("effect", tempClass, false);
}
src = src.parentElement;
}
}
function setupEffect() {
// Entering an element
walkStyles(event.toElement);
}
function cleanupEffect() {
// Exiting an element
walkStyles(event.fromElement);
}
// Hook up event handlers.
document.onmouseover = setupEffect;
document.onmouseout = cleanupEffect;
</SCRIPT>
</HEAD>
<BODY>
<H1 CLASS="header" effect="explode">
This element will explode when the mouse moves over it.
</H1>
</BODY>
</HTML>
In the preceding code, the H1 element has a user-defined
attribute named effect that contains a class name for use when the mouse is over
the element. When the mouse is over the element, the
walkStyles function swaps the values of the element's
className and effect properties, thereby changing
its style. When the mouse moves off the element, the same function swaps
the values back.
You can add new elements with their own effects to this code quite
easily. Simply define new classes in the style sheet and assign them to an
element's built-in CLASS and custom effect attributes. The CLASS attribute specifies
the default rendering of the element, and the
effect attribute specifies the rendering of the element when the mouse moves over it.
The techniques sections at the end of this chapter use dynamic
class changes to create interactive and fun Web pages. The code is similar to
this example, allowing these techniques to be easily reused in existing Web pages. [Содержание]
|
