title: enable disable stylesheet using javascript in chrome
body: <p>Rephrase of question: What is the best way to provide alternate stylesheets for a document?</p>
  
  <p>I have  a list of stylesheets, all of which are referenced in the html file.
  I use javascript to disable all but one file.</p>
  
  <p>example:</p>
  
  <pre><code>style1   disabled = false
  style2   disabled = true
  </code></pre>
  
  <p>In practice, the last stylesheet to load (style2) is the active one, regardless of the disabled property.</p>
  
  <p>How can I alternate between stylesheets on a document in chrome?</p>
  
  <p>I tried to set the value of <code>href</code> attribute, but it seems to be read only. </p>
  
  <p>example of code I have been using:  (I am using an object called MenuStyles that is storing various css information)</p>
  
  <pre><code>function setActiveStyleSheet(name) {
  
      var selectedSheet;
      var currentSheet;
      for (var i = 0; i &lt; MenuStyles.styleSheets.length; i++) {
          currentSheet = MenuStyles.styleSheets[i];
          if (currentSheet.name === name) {
              selectedSheet = currentSheet.sheetObj;
              currentSheet.disabled = false;
          } else {
              currentSheet.disabled = true;
          }
      }
      return selectedSheet;
  }
  </code></pre>
  
  <p><strong>EDIT:</strong>  it turns out the problem was due entirely to bugs in the code. disabled property works fine. below is the fixed function:</p>
  
  <pre><code>function setActiveStyleSheet(name) {
      var selectedSheet;
      var currentSheet;
      for (var i = 0; i &lt; MenuStyles.styleSheets.length; i++) {
          currentSheet = MenuStyles.styleSheets[i];
          if (currentSheet.name === name) {
              selectedSheet = currentSheet.sheetObj;
              currentSheet.sheetObj.disabled = false;
          } else {
              currentSheet.sheetObj.disabled = true;
          }
      }
      return selectedSheet;
  }
  </code></pre>