javascript - document.styleSheets 什么都不返回

Question

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

我正在使用的 css 文件包含:

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

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

我有好几对关键帧。

我的问题是 document.styleSheets 返回一个空的 css 文件，如果我 console.log 它并在 firebug 中检查。结果，rules.length 为空。基于 Webkit 的浏览器可以正常工作。

我是否遗漏了一些明显的东西？

Answer 1

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

下面是我在代码中处理这个问题的方法:

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; 

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