Heim  >  Artikel  >  Web-Frontend  >  js 操作css实现代码_javascript技巧

js 操作css实现代码_javascript技巧

WBOY
WBOYOriginal
2016-05-16 18:51:331167Durchsuche

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

复制代码 代码如下:



<script> <BR>function addCSSRule(key,value){ <BR>var css = document.styleSheets[document.styleSheets.length-1]; <BR>css.cssRules ? <BR>(css.insertRule(key+"{"+value+"}", css.cssRules.length)) : <BR>(css.addRule(key,value)) ; <BR>} <BR>function removeCSSRule(key){ <BR>for(var i = 0; i < document.styleSheets.length; i++){ <BR>var css = document.styleSheets[i]; <BR>css.cssRules ? <BR>(function(){ <BR>for(var j = 0; j < css.cssRules.length; j++){ <BR>if(css.cssRules[j].selectorText==key){ <BR>css.deleteRule(j); <BR>} <BR>} <BR>})() : <BR>(css.removeRule(key)) ; <BR>} <BR>} <BR></script>

abc



Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn