我想用JavaScript調(diào)整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動畫屬性.但是我的代碼仍然返回帶前綴的關(guān)鍵幀規(guī)則@ -webkit-keyframes changecolor,因為它也適用于條件if((rule.type === window.CSSRule.KEYFRAMES_RULE || rule.type === window.CSSRule.WEBKIT_KEYFRAMES_RULE) &&& rule.name === ruleName){.

選擇瀏覽器實(shí)際使用的關(guān)鍵幀規(guī)則有什么更好的方法？

解決方法:

使用的關(guān)鍵幀規(guī)則是最后定義的.因此,您可以從最后而不是從頭開始循環(huán)：

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;

}

}

標(biāo)簽：javascript,css,css-animations

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

總結(jié)

以上是生活随笔為你收集整理的js 创建keyframe_javascript – 查找特定的CSS @keyframes规则的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。