2

我正在使用 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 的浏览器可以正常工作。

我在这里遗漏了一些明显的东西吗？

4

1 回答 1

2

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

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

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-14T08:51:22.933 回答