Question

我正在尝试在我的网站上实现一个代表性的布局。响应性的主要驱动因素是一些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属性时，它会正确更新。我也尝试在'link'节点上使用jquery的prop函数，这会产生相同的行为。

我怎样才能在ie8中实现这种行为？如果它与ie9不同，请包含相关信息。

Answer 1

document.styleSheets [0] .disabled = TRUE;

这个确实禁用IE7和8中的第一个样式表（不记得大约6个）。

你的 isThisTheRightSheet（x）方法可能会禁用错误的工作表 - IE可能会对它们进行排序不同的，或者您可能正在使用document.styleSheets.sheet或cssRule而不是IE（在＃9之前）样式表和规则。

对于（styleSheets中的x），可能正在迭代除工作表之外的其他属性 - 您可能希望使用styleSheets长度属性，并且：

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

Answer 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]-->

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

2 个答案: