js 操作css實現代碼

2024-05-06 14:15:10

字體：大中小

來源：轉載

供稿：網友

當我們需要的是一條規則的時候，總不能在每次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>

上一篇：javascript 禁止復制網頁

下一篇：js在Firefox與IE中對DOM對像的引用的比較