js 操作css實現(xiàn)代碼
更新時間：2009年06月11日 22:16:16 作者：
雖說jquery支持css選擇器，可以把一些css規(guī)則放在js里，js無論如何是比css靈活的。但是js修改的是dom的htmlelement的stlye，是一個操作而非規(guī)則。
當我們需要的是一條規(guī)則的時候，總不能在每次dom發(fā)生變化的時候去執(zhí)行這個操作，否則也太效率低下了。
好在dom中css rules也是可以修改的。不過不同瀏覽器的對于css rules的接口描述也不同，其中ie中以類似hash table的方式，而ff以數(shù)組方式。
從可編程性上說，ie的接口描述更討程序員喜歡，不過從邏輯上說，ff顯然更為合理。
我提供了類似于ie的方式對兩套代碼進行簡單包裝，不過ie在dom的css removeRule之后并不能確定同步的把規(guī)則兌現(xiàn)。所以最好用規(guī)則覆蓋的方式而非remove。
需要注意的是，在使用改js函數(shù)的時候，頁面上至少要有一個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>
好在dom中css rules也是可以修改的。不過不同瀏覽器的對于css rules的接口描述也不同，其中ie中以類似hash table的方式，而ff以數(shù)組方式。
從可編程性上說，ie的接口描述更討程序員喜歡，不過從邏輯上說，ff顯然更為合理。
我提供了類似于ie的方式對兩套代碼進行簡單包裝，不過ie在dom的css removeRule之后并不能確定同步的把規(guī)則兌現(xiàn)。所以最好用規(guī)則覆蓋的方式而非remove。
需要注意的是，在使用改js函數(shù)的時候，頁面上至少要有一個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>
您可能感興趣的文章:
相關文章
微信小程序云開發(fā)如何實現(xiàn)數(shù)據(jù)庫自動備份實現(xiàn)
這篇文章主要介紹了小程序云開發(fā) 數(shù)據(jù)庫自動備份實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家介紹了微信小程序登錄會話密鑰session失效解決方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
這篇文章主要為大家詳細介紹了純js實現(xiàn)圖片勻速淡入淡出效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了微信小程序單列下拉菜單，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
JS實現(xiàn)網(wǎng)頁標題欄顯示當前時間和日期的完整代碼
這篇文章主要介紹了JS實現(xiàn)網(wǎng)頁標題欄顯示當前時間和日期的方法,涉及JavaScript日期時間函數(shù)及網(wǎng)頁標題欄操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單掃雷，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
JavaScript使用Promise封裝Axios進行高效開發(fā)
這篇文章主要介紹了JavaScript使用Promise封裝Axios進行高效開發(fā)，Axios是一個基于Promise的HTTP庫，它可以幫助我們更方便地發(fā)起HTTP請求，并且提供了許多高級功能，感興趣的同學可以參考下文2023-05-05
JavaScript canvas實現(xiàn)環(huán)形漸變進度條
這篇文章主要為大家詳細介紹了JavaScript canvas實現(xiàn)環(huán)形漸變進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
如何通過IntersectionObserver實現(xiàn)懶加載
這篇文章主要介紹了通過IntersectionObserver實現(xiàn)懶加載，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-04-04