我想用JavaScript调整CSS中的特定@keyframes-rule.这一切都适用于以下代码：

CSS：

@-webkit-keyframes changecolor {

0% { color: red; }

100% { color: green; }

}

@keyframes changecolor {

0% { color: red; }

100% { color: green; }

}

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

// ...

自Chrome 43以来,浏览器支持无前缀的CSS动画属性.但是我的代码仍然返回带前缀的关键帧规则@ -webkit-keyframes changecolor,因为它也适用于条件if((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;

}

}

标签：javascript,css,css-animations

来源： https://codeday.me/bug/20190824/1709034.html