Question

我有这个代码......

function disableSheets(){
  console.log(document.styleSheets.length);
    var c = document.styleSheets.length;
    for(var i=0;i<c;i++){
      console.log(document.styleSheets[i]);
        if(typeof document.styleSheets[i]!=='undefined' && document.styleSheets[i].href.indexOf('stylezone')!=-1){
          document.styleSheets[i].disabled=true; 
        }
    }
    console.log(document.styleSheets.length);
}

当我在Firefox / Firebug中运行时，它说：

3
StyleSheet
StyleSheet
StyleSheet
3

当我在Chrome /开发者工具中运行时，它说：

3
CSSStyleSheet
CSSStyleSheet
undefined
1

所以我的问题是：

如果第3个未定义，为什么会说有3个样式表？
如何在该循环结束时丢失2个样式表？
第3张怎么了？

在我的HTML顶部，我有3个<link>，链接3个样式表，然后我立即调用disableSheets()。

Answer 1

显然，样式表会在禁用时从document.styleSheets对象（Chrome）中删除。

您的代码确实读取了第一个和第三个样式表：

概述：

3个样式表：A，B，C
var c = document.styleSheets.length;
循环，i = 0
i=0，选择styleSheet[i] = StyleSheet A
剩下2个样式表：B，C
循环，i = 1
i=1，选择styleSheet[i] = StyleSheet C
剩下1个样式表：B
循环，i = 2
i=2，选择styleSheet[i] = undefined
循环 i<3 = break
Console.log(document.styleSheets.length) = 1（样式表B）

要使代码正常工作，请反转循环：

 for(var i=c-1; i>=0; i--){

注意：在 i 初始化c-1！ JavaScript类数组对象的索引从零开始。

Answer 2

在考虑了-webkit- bug一段时间后，我找到了解决方案：

只需将document.styleSheets [n]分配给全局变量，然后再将其保留在StyleSheetList中。

Answer 3

在样式表上设置disable=true会将其从document.styleSheets

中删除

这是Chrome，Safari中的一个错误

http://code.google.com/p/chromium/issues/detail?id=88310

Chrome中有关document.styleSheets的奇怪行为

3 个答案: