我正在使用CSS3动画将项目从一个屏幕边移动到另一个屏幕边。我希望确保该效果不受屏幕分辨率的影响。为此,我使用
这是我使用的JS代码:
我正在使用的CSS文件包含以下内容:
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; }
}
我有很多对关键帧。
我的问题是,如果我在控制台中使用console.log
并在firebug中检查,document.styleSheets
返回一个空的CSS文件。因此,rules.length
为空。基于Webkit的浏览器没有任何问题。
我是否漏掉了一些显而易见的东西?
.cssRules
可以工作而.rules
不能。可以尝试这个方法。同时,也可以尝试使用var stylesheet = document.styleSheets;
然后通过指定的索引访问 stylesheet 变量。 - Shaharconsole.log(document.styleSheets)
,firebug 给我的结果:http://i.stack.imgur.com/c8Omc.png - bozcssRules
。 - Boris Zbarskydocument.styleSheets.length
之前大约是50
,但在仅更改一个规则后,它变成了4
左右(数字会有所不同)。这种情况发生在 Brave(Chromium 派生版)中。非常不一致。看起来像是一个 bug。 - donquixote