• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 21. Cascading Style Sheets and C... > Changing Style Sheets On-the-Fly

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> 

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint