Disabling or Enabling a Style Sheet

Although being able to swap around classes is a quick way to change specific styles, your final alternative for dynamically changing CSS is to swap entire style sheets.

Sometimes, your visitors might want to see just the text without all those fancy styles. Their lossbut everyone has their own taste. Internet Explorer and Mozilla browsers let you turn style sheets on and off using JavaScript.

In this example (Figures 18.9 and 18.10), controls are provided that allows the visitor to choose between two distinct styles that are enabled by different style sheets.

Figure 18.9. When the page loads, the `style1` style sheet is enabled and `style2` is disabled. The text, however, is extremely light and hard to read.

Figure 18.10. After the "Style 2" link is clicked, a higher contrast design is presented.

To switch style sheets:

function setStyle(objectID, disableState) {...}

Add the function setStyle() to your JavaScript (Code 18.5).

Code 18.5. The controls trigger the function `toggleStyle()`, which will disable one style sheet (`disabled=true`) while enabling another (`disabled=false`).

[View full width]

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD /xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>CSS, DHTML &amp; Ajax | Disabling a Style Sheet</title>  <script type="text/javascript">  function setStyle(objectID, disableState) {       var object = document.getElementById(objectID);       object.disabled=disableState;       oldStyle = object;  }  function toggleStyle(objectID) {       if (oldStyle) oldStyle.disabled=true;       var object = document.getElementById(objectID);       object.disabled=false;       oldStyle = object;  }  </script>  <style type="text/css" media="screen">  h1, h2 {       color: #999;       margin: .5em 0em; }  #controls {       cursor:pointer;       color: red; }  .author {       margin-top: 0cm;       font: bold 1em Arial, Helvetica, sans-serif; }  .chapterTitle {       display: block;       font-size: smaller; }  .dropBox {       width: 228px;       padding: 6px;       border: 3px solid #999;       background-color: #fff;       margin: 0px 0px 8px 8px;       float: right; }  .copyHuge {       background-color: #fff;       font-size: 2em; width: 600px;       color: red; }  .copyTiny {       background-color: #ccc;       font-size: .5em;       width: 300px; }  </style>  <style type="text/css" >  h1 {       color: #eeeeee;       font: italic 3em fantasy; }  #copy { color: #999; }  </style>  <style type="text/css" >  h1,h2 {       font-size: 1.75em;       color: #000000;       font: bold 1em "times new roman", times, serif; }  #copy { color: #000; }  </style>  </head>  <body onload="setStyle('style2', 'true');">  <div >  <span onclick="toggleStyle('style1');"> Style 1</span> |  <span onclick="toggleStyle('style2');"> Style 2</span>  </div>  <div >  <h1>Alice's Adventures in Wonderland</h1>  <p >Lewis Carroll</p>  <h2>CHAPTER XII       <span > Alice's Evidence </span></h2>  </div>  <div >  <div >  <img src="/books/3/292/1/html/2/alice42a.gif" alt="" height="293" width="220" />  'Who cares for you?' said Alice, (she had grown to her full size by this time.) 'You're  nothing but a pack of cards!'</div>  <p>'Here!' cried Alice, quite forgetting in the flurry of the moment how large she had  grown in the last few minutes...</p>  </div>  </body></html>

This function lets you disable or enable any style element that has a specific ID using the disable state value of either true (disabled) or false (enabled):

object.disabled = disableState;

function toggleStyle(objectID) {...}

Add the function toggleStyle() to your code.

This function first disables any previously enabled style sheets and then uses the object ID to address and enable the new style sheet by setting disabled to false:

object.disabled = false;

Set up style sheets in the head of your document. Give each style element a unique ID.

In this example, I created two styles to toggle between: a style sheet called style1 and another called style2.

onload="setStyle('style2', 'true');"

Add an onload event handler to the body element and disable any style sheets that you don't want to be initially used using the function from Step 1 and passing it the ID for the style sheet and the value TRue.

onclick="toggleStyle('style1');"

Set up an event handler that calls the toggleStyle() function to turn on or off the desired style sheet using the function from Step 2.

Tips

This technique doesn't work in Netscape 6.
A distinct disadvantage of this method is that it is not supported in Safari and Opera browsers.

Figure 18.9. When the page loads, the style1 style sheet is enabled and style2 is disabled. The text, however, is extremely light and hard to read.

Figure 18.10. After the "Style 2" link is clicked, a higher contrast design is presented.

Code 18.5. The controls trigger the function toggleStyle(), which will disable one style sheet (disabled=true) while enabling another (disabled=false).

Figure 18.9. When the page loads, the `style1` style sheet is enabled and `style2` is disabled. The text, however, is extremely light and hard to read.

Code 18.5. The controls trigger the function `toggleStyle()`, which will disable one style sheet (`disabled=true`) while enabling another (`disabled=false`).