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