js 操作css實現代碼
來源:互聯網
上載者:User
當我們需要的是一條規則的時候,總不能在每次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>