| Although being able to add or change an individual declaration is great (see the previous section, "Adding or Changing a Style Declaration"), doing this for more than one declaration at a time is time-consuming. Instead, you need the ability to change multiple declarations or an entire rule at once. You can accomplish this task simply by setting up multiple classes and then swapping the entire CSS class assigned to an object. In this example (Figures 18.7 and 18.8), controls are provided to switch the #copy object between the style1 and style2 classes. Figure 18.7. When the page loads, it defaults to Style 1, which uses large, red, serif text on a white background. 
Figure 18.8. After clicking the "Style 2" control, the text column narrows, and the text is black sans-serif on a gray background. 
To change the CSS class of an object: | | 1. | function setClass(objectID, newClass) {...}
Add the function setClass() to your JavaScript (Code 18.4).
Code 18.4. The setClass() function assigns a different CSS class to a particular object in the browser window.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD  /xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Changing a Class</title> <script type="text/javascript"> function setClass(objectID, newClass) { var object = document.getElementById (objectID); object.className = newClass; } </script> <style type="text/css" media="screen"> h1, h2 { color: #999; margin: .5em 0em; } #controls { cursor:pointer; color: red; } .author { margin-top: 0cm; font: bold 1em Arial, Helvetica, sans-serif; } .chapterTitle { display: block; font-size: smaller; } .dropBox { width: 228px; padding: 6px; border: 3px solid #999; background-color: #fff; margin: 0px 0px 8px 8px; float: right; } .style1 { background-color: #fff; font-size: 1em; width: 600px; color: red;} .style2 { background-color: #ccc; font-family: Arial, Helvetica, sans-serif; font-size: .75em; width: 400px;} </style> </head> body> <div > <span onclick="setClass('copy', 'style1');">Style 1</span> | <span onclick="setClass('copy', 'style2');">Style 2</span> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>CHAPTER XI<span > Who Stole the Tarts? </span></h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice37a.gif" alt="" height="298" width="220" /> 'The Queen of Hearts, she made some tarts, All on a summer day: The Knave of Hearts, he stole those tarts, And took them quite away!' </div> <p>The King and Queen of Hearts were seated on their throne when they arrived...</p> </div> </body></html>
|
This function uses the ID of the object to find its address, and then uses the address to change the CSS class being applied to this object to the new CSS class (newClass):
object.className = newClass;
| 2. | #copy {...}
Set up the CSS rule for your object(s) with whatever styles you desire. These styles will not be affected by the change, but can be overridden if the attribute is changed in the .style1 class.
| | | 3. | .style1 {...}
Set up the class selector CSS rules that you'll be applying to your objects.
| 4. | onmouseover="setClass('copy', 'style1');"
Add event handlers to trigger the function you created in Step 1, and pass it the ID for the object you want to address and the name of the class you want to apply to that object.
| 5. | <div >...</div>
Set up your HTML element(s).
|
|
