在 Internet Explorer 8 中动态启用/禁用样式表答案

【问题标题】：Dynamically enable/disable a stylesheet in Internet explorer 8在 Internet Explorer 8 中动态启用/禁用样式表
【发布时间】：2012-09-19 16:27:09
【问题描述】：

我正在尝试在我的网站上实现响应式布局。响应性的主要驱动因素是一些在窗口调整大小事件时触发的 javascript。当窗口宽度超过某些阈值时，我启用我想要激活的样式表，并禁用其他的。这就是我启用/禁用样式表的方式

var styles = document.styleSheets;

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

除了 Internet Explorer 8（尚未测试 9）外，这适用于任何地方。在 8 中，属性得到更新，但显示没有。因此，我将调整触发该功能的窗口大小。显示保持不变，但是当我在控制台中检查 disabled 属性时，它已正确更新。我还尝试在“链接”节点上使用 jquery 的 prop 函数，这会导致相同的行为。

如何在 ie8 中实现这种行为？如果 ie9 不同，请提供相关信息。

【问题讨论】：

你为什么不用 CSS media queries？
stackoverflow.com/q/814219/527096的可能重复
@JamWaffles 因为我需要支持不支持媒体查询的 IE8
@potench 它不是重复的，因为我希望根据窗口大小而不是浏览器版本来切换 css
@aamir 你是对的，对不起！我认为您会想要使用 JamWaffles 建议的媒体查询，但由于 IE8 不支持媒体查询，您需要使用 respondjs github.com/scottjehl/Respond 填充它

标签： javascript internet-explorer-8 internet-explorer-9 responsive-design

【解决方案1】：

document.styleSheets[0].disabled=true;

这确实禁用了 IE7 和 8 中的第一个 styleSheet（不记得是 6）。

您的 isThisTheRightSheet(x) 方法可能禁用了错误的工作表 - IE 可能会订购它们不同，或者您可能正在使用 document.styleSheets.sheet 或 cssRule 而不是 IE（#9 之前）样式表和规则。

而 for(x in stylesSheets) 可能会遍历工作表以外的其他属性——您可能想要使用 styleSheets 长度属性，并且：

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

【讨论】：

【解决方案2】：

使用 html 条件..

<!--[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]-->

【讨论】：

这行不通。我需要能够在窗口调整大小事件上切换样式表