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

Chapter 33. Styling for HTML Elements > Activating and Deactivating Style Sheet...

Activating and Deactivating Style Sheets

Internet Explorer 5 and Netscape 6 also provide for “backup” style sheets. You can literally use JavaScript and the DOM for style sheets to turn a style sheet on or off. Listing 33.6 is a simplistic example of style sheet swapping.

Listing 33.6. Switching Style Sheets Dynamically

<!-- 33lst06a.htm -->
<?xml version="1.0" ?>
<!-- Netscape 6.0+, Internet Explorer 5.0+ only -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title></title>
<link href="33lst06b.css" rel="stylesheet" />
<link href="33lst06c.css" rel="alternate stylesheet" title="blue" />
<script language="JavaScript" type="text/javascript">
<!--
function go(y) {
  for (var x = 0; x < document.styleSheets.length; x++) {
    if (document.styleSheets[x].disabled == false) {
      document.styleSheets[x].disabled = true
      document.styleSheets[y].disabled = false
      x = document.styleSheets.length // exit function
      }
    }
  }
//-->
</script>
</head>
<body>
<p>This Sentence Starts Out As LowerCase Letters.</p>
<p><a href="javascript:go(1)">UPPERCASE</a> <a href="javascript:go(0)" >lowercase</a></p>
<!-- Results after clicking UPPERCASE link:
THIS SENTENCE STARTS OUT AS LOWERCASE LETTERS.

Results after clicking lowercase link:
this sentence starts out as lowercase letters.
-->
</body>
</html>

<!-- 33lst06b.css -->
p {
  text-transform: lowercase;
  }
<!-- 33lst06c.css -->
p {
  text-transform: uppercase;
  }
/* End of listing */


					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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