document.styleSheets什么也没有返回

我使用css3动画将项目从屏幕的一侧移动到另一侧。无论屏幕分辨率如何，我都希望确保此效果可以正常工作。为了做到这一点，我使用document.styleSheets为了访问与所有动画关键帧的css文件并更改它们的最终值。document.styleSheets什么也没有返回

这里是我使用的js代码：

var stylesheet = document.styleSheets[1]; 

var rules = stylesheet.rules; 
var keyframes; 
var keyframe; 

for (var i = 0; i < rules.length; i++){ 
    keyframes = rules.item(i); 

    var keyframeRules = keyframes.cssRules; 
    var j = keyframeRules.length; 
    var index = i+1; 

    while (j--) { 
     keyframe = keyframeRules.item(j); 
     if (keyframe.keyText === "100%") { 
      if(keyframe.style.left != ''){ 
       keyframe.style.left = $(document).width() + $('#cloud'+ index).width() + 'px'; 
      } 
     } 
    } 

    $('#cloud'+ index).addClass('animating'); 
}

我使用的CSS文件包含：

@-moz-keyframes cloud1 { 
0%{ left: -400px; } 
100%{ left: 0; } 
} 

@-webkit-keyframes cloud1 { 
0%{ left: -400px; } 
100%{ left: 0; } 
}

我有好几个对关键帧的在那里。

我的问题是document.styleSheets返回一个空的CSS文件，如果我console.log它并检查萤火虫。因此，rules.length为空。基于Webkit的浏览器没有任何问题。

我在这里错过了一些明显的东西吗？

来源

2012-09-14 boz

在Firefox中，似乎.cssRules工作和.rules不。尝试这个。另请尝试'var stylesheet = document.styleSheets;'然后使用特定索引访问样式表变量。 – Shahar

第二部分似乎有一半工作。它给了我两个css文件，但如果尝试使用索引访问第二个css文件，它不会再提供任何内容。这里是萤火虫给我的屏幕截图，如果我做'console.log（document.styleSheets）' - http://i.stack.imgur.com/c8Omc.png – boz

规范说这个属性叫做'cssRules'。 –

不同的浏览器使用不同的名称来引用这些规则。

以下是我在我的代码解决这个问题：

var cssRules = stylesheet.rules; // chrome, IE 
if (!cssRules) cssRules = stylesheet.cssRules; // firefox (and maybe Chrome too in recent versions)

你会做得一样：

var cssRules = stylesheet.rules || stylesheet.cssRules;

但我更喜欢第一个版本，因为它更清晰。

来源

2012-09-14 08:51:22

我的问题是'样式表'似乎是空白的。如果我只是在没有索引的情况下执行'document.styleSheets'，那么我会得到http://i.stack.imgur.com/c8Omc.png，但只要我尝试使用索引来获取'animation.css'，我再没有什么了。 – boz

'document.styleSheets [1] .cssRules'即使'document.styleSheets [1]'什么也不给 - 是多么奇怪的事情。 – boz

这不是一个比浏览器更萤火虫的问题吗？ –

document.styleSheets什么也没有返回

回答

相关问题