本文介绍如何通过JavaScript动态添加和删除CSS规则，以解决DOM变化时频繁操作样式的性能问题。文章对比了IE与Firefox在cssRules接口上的差异，并提供了一套兼容代码，利用insertRule和addRule方法实现跨浏览器操作。示例包含完整的HTML结构与JS函数，演示如何动态修改元素样式及移除规则，适用于需要灵活控制页面样式的场景。
动态修改CSS规则的必要性
当业务逻辑需要动态调整样式规则时，如果每次DOM结构或内容发生变化都重新执行样式计算或操作，效率会显著降低。
实际上，DOM中的CSS规则是可以被程序修改的。然而，不同浏览器对CSS规则的接口实现存在差异：Internet Explorer（IE）采用类似哈希表的结构，而Firefox则使用数组结构来管理规则。
从编程便利性的角度来看，IE的接口设计更符合程序员的直觉；但从数据逻辑的严谨性来看，Firefox的数组方式更为合理。
为了实现跨浏览器兼容，可以使用封装好的统一接口来处理这两套代码。需要注意的是，IE在执行removeRule删除规则后，可能不会立即同步更新规则状态，因此建议优先使用规则覆盖（即修改现有规则）的方式，而非直接删除，以确保样式同步的稳定性。
兼容IE与Firefox的实现代码
在使用上述JavaScript函数之前，页面中必须至少存在一个<style>标签，否则无法获取到有效的样式表对象。以下是具体的代码实现及运行示例。
代码如下:
<style>
#a:
{
color: blue;
}
</style>
<style>
#a:
{
background: gray;
}
</style>
<script>
function addCSSRule(key,value){
var css = document.styleSheets[document.styleSheets.length-1];
css.cssRules ?
(css.insertRule(key+"{"+value+"}", css.cssRules.length)) :
(css.addRule(key,value)) ;
}
function removeCSSRule(key){
for(var i = 0; i < document.styleSheets.length; i++){
var css = document.styleSheets[i];
css.cssRules ?
(function(){
for(var j = 0; j < css.cssRules.length; j++){
if(css.cssRules[j].selectorText==key){
css.deleteRule(j);
}
}
})() :
(css.removeRule(key)) ;
}
}
</script>
<div id="a">
abc
</div>
<button onclick='addCSSRule("#a","color:red;background:yellow;")'>
add</button>
<button onclick='removeCSSRule("#a")'>
remove</button>