Приглашаем посетить
Полевой Н.А. (polevoy.lit-info.ru)

Changing the class Attribute

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.

[Содержание]