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

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 中，属性得到更新，但显示没有。所以我将调整触发该功能的窗口大小。显示保持不变，但当我在控制台中检查禁用属性时，它已正确更新。我还尝试在“链接”节点上使用 jquery 的 prop 函数，这会产生相同的行为。

如何在 ie8 中实现此行为？如果 ie9 有所不同，请包含相关信息。

Answer 1

document.styleSheets[0].disabled=true;

这确实禁用 IE7 和 8 中的第一个样式表(不记得 6 了)。

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

并且 for(x in stylesSheets) 可能会迭代工作表以外的其他属性 - 您可能需要使用 styleSheets length 属性并且:

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