Javascript 查找特定CSS@keyframes规则

我想用JavaScript调整CSS中特定的

@关键帧
-规则。这一切在以下代码中都非常有效：

CSS:

JavaScript:

function getKeyframeRule(ruleName) {
    var ss = document.styleSheets,
        rule, i, x;

    for (i = 0; i < ss.length; ++i) {
        if (ss[i].cssRules) {
            // loop through all the rules
            for (x = 0; x < ss[i].cssRules.length; ++x) {
                rule = ss[i].cssRules[x];
                if ((rule.type === window.CSSRule.KEYFRAMES_RULE || rule.type === window.CSSRule.WEBKIT_KEYFRAMES_RULE) && rule.name === ruleName) {
                    return rule;
                }
            }
        }
    }
    return null;
}

// find keyframes rule
var rule = getKeyframeRule("changecolor");
console.log(rule.cssText);

// adjust keyframes rule
// ...

函数getKeyframeRule（规则名）{
var ss=document.styleSheets，
规则i，x；
对于（i=0；i

由于Chrome 43，浏览器支持不固定的CSS动画属性。但是我的代码仍然返回带前缀的关键帧规则
@-webkit keyframes changecolor
，因为它也适用于条件
（（rule.type==window.CSSRule.keyframes|rule | rule.type==window.CSSRule.webkit_keyframes_rule）和&rule.name==ruleName）{

选择浏览器实际使用的关键帧规则的更好方法是什么

以下是完整的示例：
使用的
关键帧规则是最后一个定义的规则。因此，您可以从末尾而不是从开头循环：

for (x = ss[i].cssRules.length - 1; x >= 0; x--) {
    rule = ss[i].cssRules[x];
    if ((rule.type === window.CSSRule.KEYFRAMES_RULE || rule.type === window.CSSRule.WEBKIT_KEYFRAMES_RULE) && rule.name === ruleName) {
        return rule;
    }
}

看

for (x = ss[i].cssRules.length - 1; x >= 0; x--) {
    rule = ss[i].cssRules[x];
    if ((rule.type === window.CSSRule.KEYFRAMES_RULE || rule.type === window.CSSRule.WEBKIT_KEYFRAMES_RULE) && rule.name === ruleName) {
        return rule;
    }
}