title: Dynamically enable/disable a stylesheet in Internet explorer 8
body: <p>I'm trying to implement a repsonsive layout on my website.  The main driver of responsiveness is a bit of javascript that fires on window resize events.  When the window width crosses certain thresholds I enable the stylesheet that I want to be active, and disable the other ones.  This is how i enabled/disabled stylesheets</p>
  
  <pre><code>var styles = document.styleSheets;
  
  for var(x in styles) {
    if (isThisTheRightSheet(x)) {
      styles[x].disabled = false;    
    } else {
      styles[x].disabled = true;
    }
  }
  </code></pre>
  
  <p>This works everywhere except internet explorer 8 (haven't tested 9 yet).  In 8, the property gets updated, but the display does not.  So i'll resize my window which triggers the function.  The display remains unchanged, but when i check the disabled property in the console, it is updated correctly.  I've also tried using jquery's prop function on the 'link' node and that results in the same behavior.</p>
  
  <p>How can i achieve this behavior in ie8?  And if it's different for ie9 please include info on that.  </p>