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如果我console.log返回一个空的css文件并在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;

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

document.styleSheets什么都不返回

1 个答案: