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>