Javascript document.styleSheets不返回任何内容

我使用css3动画将项目从屏幕的一侧移动到另一侧。我想确保无论屏幕分辨率如何，这种效果都能正常工作。为了做到这一点，我使用

document.styleSheets

来访问包含所有动画关键帧的css文件并更改其最终值

以下是我正在使用的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');
}

我有相当多的关键帧对在那里

我的问题是

document.styleSheets

如果我

console.log

它并在firebug中检查，则返回一个空css文件。因此，

规则.length

为空。基于Webkit的浏览器可以正常工作

---

我是否遗漏了一些明显的内容？

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

以下是我在代码中处理此问题的方法：

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; 

---

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

在firefox中，.cssRules有效，.rules无效。试试这个。还可以尝试

var stylesheet=document.styleSheets然后使用特定索引访问stylsheet变量。第二部分似乎起了一半作用。它给了我两个css文件，但是如果然后尝试使用索引访问第二个css文件，它又不会给我任何东西。下面是firebug给我的屏幕截图，如果我执行
console.log（document.styleSheets）
-规范说该属性名为
cssRules
。我的问题是
样式表
似乎是空的。如果我只是做
document.styleSheets
而没有索引，那么我会得到，但是一旦我尝试使用索引来获取
animation.css
，我就什么也得不到了。
document.styleSheets[1].cssRules
给出了预期的输出，即使
document.styleSheets[1]
什么都不给-真奇怪。这不是比浏览器更像一个Firebug问题吗？
var cssRules = stylesheet.rules || stylesheet.cssRules;