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.
|