js 操作css实现代码

281 阅读 0 评论 186 点赞

我是靠谱客的博主痴情老虎，最近开发中收集的这篇文章主要介绍js 操作css实现代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

当我们需要的是一条规则的时候，总不能在每次dom发生变化的时候去执行这个操作，否则也太效率低下了。
好在dom中css rules也是可以修改的。不过不同浏览器的对于css rules的接口描述也不同，其中ie中以类似hash table的方式，而ff以数组方式。
从可编程性上说，ie的接口描述更讨程序员喜欢，不过从逻辑上说，ff显然更为合理。
我提供了类似于ie的方式对两套代码进行简单包装，不过ie在dom的css removeRule之后并不能确定同步的把规则兑现。所以最好用规则覆盖的方式而非remove。
需要注意的是，在使用改js函数的时候，页面上至少要有一个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>