Chrome中关于document. stylesheet的怪异行为

Weird behaviour in Chrome regarding document.styleSheets

本文关键字:stylesheet document Chrome      更新时间:2023-09-26

我有这个代码…

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/Developer Tools中运行它时,它说:

3
CSSStyleSheet
CSSStyleSheet
undefined
1

我的问题是:

  1. 如果第三个样式表没有定义,为什么会说有3个样式表?
  2. 我是如何在循环结束时丢失2个样式表的?
  3. 第三张纸怎么了?

在我的HTML顶部,我有3个<link> s,链接3个样式表,然后紧接着我调用disableSheets()

显然,样式表从document.styleSheets对象(Chrome)中删除,当禁用时。

你的代码实际上读取了第一个和第三个样式表:

概述:

  • 3个样式表:A, B, C
  • var c = document.styleSheets.length;
  • 循环
  • , i = 0
  • i=0, Select styleSheet[i] = StyleSheet A
    2个样式表:B, C
  • 循环
  • , i = 1
  • i=1, Select styleSheet[i] = StyleSheet C
    1 .样式表左:B
  • 循环
  • ,我= 2
  • i=2, Select styleSheet[i] = undefined
  • Loop i<3 = break
  • Console.log(document.styleSheets.length) = 1(样式表B)

让你的代码工作,反向循环:

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

注意:初始化i c-1 !JavaScript类数组对象的索引是从零开始的

在考虑了一段时间后,我找到了一个解决方案:

只是分配文件。

将样式表[n]设置为全局变量,然后将其保留在样式表列表中。

在stylesheet上设置disable=true将从document. stylesheet中删除它

这是一个错误在Chrome, Safari

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