0

我正在尝试在我的网站上实现响应式布局。响应性的主要驱动因素是一些在窗口调整大小事件时触发的 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 不同，请提供相关信息。

4

2 回答 2

2

document.styleSheets[0].disabled=true;

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

您的isThisTheRightSheet(x)方法可能禁用了错误的工作表 - IE 可能以不同的方式对它们进行排序，或者您可能使用 document.styleSheets.sheet 或 cssRule 而不是 IE(#9 之前) styleSheet 和规则。

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

 for(var i=0,L=styles.length;i<L;i++){}
于 2012-09-19T17:09:46.927 回答
0

使用 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]-->
于 2012-09-19T16:31:00.417 回答