Dynamically enable/disable a stylesheet in Internet explorer 8

Question

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

var styles = document.styleSheets;

for var(x in styles) {
  if (isThisTheRightSheet(x)) {
    styles[x].disabled = false;    
  } else {
    styles[x].disabled = true;
  }
}

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.

How can i achieve this behavior in ie8? And if it's different for ie9 please include info on that.

Why aren't you using CSS [media queries](https://developer.mozilla.org/en-US/docs/CSS/Media_queries)? — Bojangles, Sep 19 '12 at 16:31
Possible duplicate of http://stackoverflow.com/q/814219/527096 — potench, Sep 19 '12 at 16:33
@JamWaffles because i need to support IE8 which does not support media queries — aamiri, Sep 19 '12 at 17:01
@potench it is not a duplicate, because i am looking to switch the css based on window resizes, not by browser versions — aamiri, Sep 19 '12 at 17:03
@aamiri you're right, sorry! I think you'll want to use media queries like JamWaffles suggests, but since IE8 doesn't support media queries you'll need to polyfill it with respondjs https://github.com/scottjehl/Respond — potench, Sep 19 '12 at 17:06

score 2 · Answer 1 · answered Sep 19 '12 at 17:09

document.styleSheets[0].disabled=true;

This does disable the first styleSheet in IE7 and 8 (don't remember about 6).

Your isThisTheRightSheet(x) method may be disabling the wrong sheet- IE may order them differently, or you may be using document.styleSheets.sheet or cssRule instead of the IE(before #9) styleSheet and rule.

And for(x in stylesSheets) may be iterating through other properties than the sheets- you may want to use the styleSheets length property and:

 for(var i=0,L=styles.length;i<L;i++){}

score 0 · Answer 2 · answered Sep 19 '12 at 16:31

0

use html conditionals..

<!--[if IE 8]>
   <link rel="stylesheet" type="text/css" href="css/style_ie8.css" />
<![endif]-->
<!--[if IE 9]>
   <link rel="stylesheet" type="text/css" href="css/style_ie9.css" />
<![endif]-->

answered Sep 19 '12 at 16:31

kingkode

2,220
18
28

this won't work. I need to be able to switch stylesheets on window resize events – aamiri Sep 19 '12 at 17:01

Dynamically enable/disable a stylesheet in Internet explorer 8

2 Answers2