Using Dynamic Styles

With dynamic HTML, you can also set styles for the entire Web page as needed, which is great for getting text noticed. The following example, dynamicStyles.html, lets you toggle between two style sheets. The Web page example shown in Figure 11.5, demonstrates the normal style.

image from book
Figure 11.5: The dynamicStyles application

When you click the Dramatic Style button, the style sheet used in the application changes to the dramatic style shown in Figure 11.6.

image from book
Figure 11.6: Setting a new style sheet

This example starts by creating a style sheet with the ID dramatic for a set of dramatic styles:

 <html>     <head>         <title>           Setting style sheets dynamically         </title>         <style >            body {font-family:              verdana; color: white; background-color: black}         </style>         .         .         .

and continues by creating a style sheet named normal, which starts off disabled:

 <html>     <head>         <title>           Setting style sheets dynamically         </title>         <style >            body {font-family:              verdana; color: white; background-color: black}         </style>         <style  disabled="true">             body {font-family: 'times new roman'; color: black;                 background-color: white}         </style>         .         .         .

There are two buttons in this example, one to set the normal style, and one to set the dramatic style. Both buttons are connected to a JavaScript function named setStyle:

 <body>     <h1>         Setting style sheets dynamically     </h1>     <center>         <input type=button value="Normal Style"             onclick="setStyle('normal')">         <input type=button value="Dramatic Style"             onclick="setStyle('dramatic')">     </center>     <p>         Set the style sheet for this page by clicking a           button.     </p> </body>

The setStyle function is passed the name of the style sheet to set:

 <script language="javascript">     function setStyle(styleName)     {     .     .     .     } </script>

You can access the style sheets in a document as document.styleSheets, which holds an array of named style sheets. To handle those style sheets, you can loop over that array:

 <script language="javascript">     function setStyle(styleName)     {         for (var loopIndex = 0; loopIndex <             document.styleSheets.length; loopIndex++) {             .             .             .         }     } </script>

You can disable all style sheets as you loop over them:

 <script language="javascript">     function setStyle(styleName)     {         var sheet         for (var loopIndex = 0; loopIndex <             document.styleSheets.length; loopIndex++) {             sheet = document.styleSheets[loopIndex]             sheet.disabled = true             .             .             .          }     } </script>

and then enable only the style sheet that’s been requested:

 <script language="javascript">     function setStyle(styleName)     {           var sheet           for (var loopIndex = 0; loopIndex <           document.styleSheets.length; loopIndex++) {           sheet = document.styleSheets[loopIndex]           sheet.disabled = true           if (sheet.id == styleName) {              sheet.disabled = false           }         }     } </script>