我正在遍历 CSS 关键帧,以便根据最接近被动画元素当前行为的关键帧将原始动画更改为新动画。我使用以下函数通过遍历样式表来获取关键帧规则。
function findKeyframesRule(rule) {
var ss = document.styleSheets;
for (var i = 0; i < ss.length; ++i) {
for (var j = 0; j < ss[i].cssRules.length; ++j) {
if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE
&& ss[i].cssRules[j].name == rule) {
return ss[i].cssRules[j];
}
}
}
return null;
}
这样称呼:var keyframes = findKeyframesRule(anim);
我的问题:我需要获取ss[i].cssRules[j]
的长度/大小(或变量keyframes
,因为它们指向相同的WebkitCSSKeyframesRule对象),但无法找到这样做的方法。我在这里找到了我认为是 CSSKeyframesRules 的来源,但它是 C 语言,所以我无法使用他们用来查找长度/大小的方法,即 ::length
等等。
我知道它有一个长度,因为我可以调用像keyframes[3].keyText
这样的东西并获取一个值,所以它就像一个数组。
我已经尝试了keyframes.size()
,keyframes.forEach
,keyframes.length
,以及更多的尝试,但它们不起作用,因为它不是一个数组,它是一个CSSKeyframesRule对象。我还尝试使用¿parent?(我不知道该怎么称呼它 - 我的意思是ss
,ss[i]
和ss[i].cssRules
)包括我认为可行的ss[i].cssRules.length
,但它没有。
这是一个小提琴来显示我的问题
你们有什么想法吗?
您的代码工作正常。只需尝试提醒
keyframes.cssRules.length
将得到 5
alert(keyframes.cssRules.length);
小提琴:http://jsfiddle.net/creativevilla/T83Nc/