Changing Style Sheets On-the-Fly


In the Internet Explorer, the document object contains a collection of the available style sheets in the styleSheets collection. You can select which style sheet is active with the style sheet disabled property. (Set this property to false for the style sheet you want to make active, and true for all the others.) Here's an example that enables you to toggle between two style sheets for a document just by clicking buttons :

(Listing 21-12.html on the web site)
 <HTML>      <HEAD>          <TITLE>              Dynamic Style Sheets          </TITLE>  <STYLE ID="WOW">   body {font-family:verdana; color:white; background-color:black}   </STYLE>   <STYLE ID="NORMAL" DISABLED="TRUE">   body {font-family:'times new roman'; color:black;   background-color:white}   </STYLE>  <SCRIPT LANGUAGE="JavaScript">              <!--  function style1()   {   document.styleSheets["NORMAL"].disabled = false   document.styleSheets["WOW"].disabled = true   }   function style2()   {   document.styleSheets["NORMAL"].disabled = true   document.styleSheets["WOW"].disabled = false   }  //-->          </SCRIPT>      </HEAD>      <BODY>          <H1>              Dynamic Style Sheets          </H1>              <INPUT TYPE=BUTTON VALUE="Style 1" ONCLICK="style1()">              <INPUT TYPE=BUTTON VALUE="Style 2" ONCLICK="style2()">          <BR>              Set the style sheet for this document with the above buttons!      </BODY>  </HTML> 

You can see the results in Figure 21.7, where I've toggled the "WOW" style sheet on.

Figure 21.7. Toggling style sheets.

graphics/21fig07.gif



Inside Javascript
Inside JavaScript
ISBN: 0735712859
EAN: 2147483647
Year: 2005
Pages: 492
Authors: Steve Holzner

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net