如何用原生JS来操作CSS Rule?

在写JS的过程中,免不了要操作CSS,操作CSS属性是最常见的,用jQuery的css方法可以很轻松的完成设置。但如果是想修改css rule呢?jQuery倒是也有这么一款css rule的插件,但这个原理是很简单的,没必要引入一个插件,两个函数即可搞定,权当学习了。

如何用原生JS来操作CSS Rule?

function $findRule(ruleName) { var sheets = document.styleSheets; for(var i=0;i<sheets.length;i++) { var rules = sheets[i].cssRules; for(var j=0;j<rules.length;j++) { var rule = rules[j]; if( rule.type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && rule.name == ruleName) { return rule; } } } return null; } function $updateRule(ruleName, key, cssText) { var rule = $findRule(ruleName); rule.deleteRule(key); rule.insertRule(cssText); }

相关阅读