| One powerful feature of dynamic HTML is the ability to change the styles that are applied to an object. CSS lets you set up rules; JavaScript lets you change those rules on the fly by adding new declarations, which (because of the cascade order) can replace previous declarations. You can change or add to any CSS property defined for any object on the screen. In this example (Figures 18.3 and 18.4), controls are provided that allow the user to apply very large or very small text font sizes to the contents of the element with the ID copy. Figure 18.3. When the page loads, the default style for the page uses a very small font size. 
Figure 18.4. After clicking the "Large" control at the top of the screen, the text is now much larger and easier to read. 
To change the declarations in an object: | | 1. | function addStyleDef(objectID, styleName, newVal) {...}
Add the function addStyleDef() to your JavaScript (Code 18.2).
Code 18.2. The addStyleDef() function changes or adds styles to the definition of 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 | Adding or Changing a Style Declaration</title> <script type="text/javascript"> function addStyleDef(objectID, styleName, newVal) { var object = document.getElementById(objectID); object.style[styleName] = newVal; } </script> <style type="text/css" media="screen"> h1, h2 { color: #999; margin: .5em 0em; } #controls { cursor:pointer; color: red; } #copy { font-size: .5em;} .author { margin-top: 0cm; font: bold 1em Arial, Helvetica, sans-serif; } .chapterTitle { display: block; font-size: smaller; color:black; } .dropBox { width: 228px; padding: 6px; border: 3px solid #999; background-color: #fff; margin: 0px 0px 8px 8px; float: right; } </style> </head> <body> <div > <span onclick="addStyleDef('copy', 'fontSize', '.5em');">Small</span> | <span onclick="addStyleDef('copy', 'fontSize', '2em');">Large</span> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>CHAPTER VIII <span > The Queen's Croquet-Ground </span></h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice28a.gif" alt="# Cards arguing" width="220" height="295" /> "Would you tell me", said Alice, a little timidly, why you are painting those roses? </div> <p>A large rose-tree stood near the entrance of the garden...</p> </div> </body></html>
|
This function addresses the object by its ID, and assigns the style styleName the new value newVal:
object.style[styleName] = newVal;
Because this new declaration is essentially added as an inline style, it will supersede any other rules applied to the element. However, it can be overridden by declarations set later in JavaScript code.
| 2. | #copy {...}
Set up your CSS rule(s).
| 3. | <div >...</div>
Set up the IDs for your object(s).
| 4. | onclick="addStyleDef('copy', 'fontSize', '.5em');"
Add event handlers to trigger the function addStyleDef(). Pass the function the ID for the object you want to address, as well as the style property you want to change and its new value. Notice that the style name is using JavaScript notation (see the sidebar "JavaScript Naming Convention").
|
 Tips
Notice that I've placed the event handler inside the <div> tag. Remember, event handlers don't have to appear only in <link> tags. For most browsers, events can be triggered from any object in the page. Style names that are composed of two or more words are linked with hyphens in CSS (font-size). To use them for dynamic CSS, you need to translate style names into the JavaScript naming style (fontSize).
Adding or Changing Styles in Internet Explorer Although the method for changing styles presented in the previous section works in most modern browsers (Internet Explorer 4+, Netscape 6+, Safari, and Opera), Internet Explorer can also add or change styles by adding new rules to an existing style sheet. First, you must give the <style> element an ID that allows it to be addressed as an object. Then you can use JavaScript to access the style sheet using the DOM. The advantage of using this technique over simply adding a style declaration is that you can quickly redefine several properties with a single function call. In this example (Figures 18.5 and 18.6), the body tag has its background and foreground colors swapped back and forth from the controls at the top of the page. Figure 18.5. When the page loads, the default values are used to display the page (black text on a white background). 
Figure 18.6. After the link is clicked, the new style rule is added to the <body> tag, turning the background red and the text white. 
JavaScript Naming Convention JavaScript has a very particular naming convention. Identifiers cannot include periods, hyphens, spaces, or any other separators, except for underscores (_). Instead, multiple words are expressed in the following manner: All letters are lowercase except for the first letter of any words after the first word. The CSS property font-size, for example, would be expressed as fontSize. I recommend sticking to this naming convention for JavaScript function names and variables, as well as CSS class and ID names, just to make things easier. |
To add a new rule to a Web page dynamically in Internet Explorer: | | 1. | function addStyleDefIE(selector, definition) {...}
Add the function addStyleDefIE() to your JavaScript (Code 18.3).
Code 18.3. The addStyleDefIE() function adds a new CSS rule to the style sheet called myStyles.| [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 | Adding or Changing Styles in Internet Explorer</title> <script type="text/javascript"> function addStyleDefIE(selector, definition) { document.styleSheets.MyStyles.addRule (selector, definition); } </script> <style type="text/css" > 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; } </style> </head> <body> <div > <span onclick="addStyleDefIE('body','background-color:white; color: black;');">Style 1</span> | <span onclick="addStyleDefIE('body','background-color:black; color: white;');">Style 2</span> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>CHAPTER VIII <span > The Queen's Croquet-Ground </span></h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice28a.gif" alt="# Cards arguing" width="220" height="295" /> "Would you tell me", said Alice, a little timidly, why you are painting those roses? </div> <p>A large rose-tree stood near the entrance of the garden...</p> </div> </body></html>
|
This function adds the new rule to the style sheet that you identify in Step 2, using the name of the selector for which you want to add a rule and the definition(s) you want to apply to that selector: document.styleSheets.MyStyles.addRule (selector, definition)
| 2. |
Add a <style> element in the head of your documenteven if you don't set any initial rulesand give it a unique ID that can be used by the function in Step 1 to address this style sheet.
| 3. | onclick="addStyleDefIE('body', 'background-color:red; color:white;');"
Add an event handler to trigger the addStyleDefIE function from Step 1. Pass to this function the selector for which you want to add a new rule and the definitions you want to assign for this new rule.
|
Tip
|
