我想用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