js 操作css實(shí)現(xiàn)代碼
更新時(shí)間：2009年06月11日 22:16:16 作者：
雖說(shuō)jquery支持css選擇器，可以把一些css規(guī)則放在js里，js無(wú)論如何是比css靈活的。但是js修改的是dom的htmlelement的stlye，是一個(gè)操作而非規(guī)則。
當(dāng)我們需要的是一條規(guī)則的時(shí)候，總不能在每次dom發(fā)生變化的時(shí)候去執(zhí)行這個(gè)操作，否則也太效率低下了。
好在dom中css rules也是可以修改的。不過(guò)不同瀏覽器的對(duì)于css rules的接口描述也不同，其中ie中以類(lèi)似hash table的方式，而ff以數(shù)組方式。
從可編程性上說(shuō)，ie的接口描述更討程序員喜歡，不過(guò)從邏輯上說(shuō)，ff顯然更為合理。
我提供了類(lèi)似于ie的方式對(duì)兩套代碼進(jìn)行簡(jiǎn)單包裝，不過(guò)ie在dom的css removeRule之后并不能確定同步的把規(guī)則兌現(xiàn)。所以最好用規(guī)則覆蓋的方式而非remove。
需要注意的是，在使用改js函數(shù)的時(shí)候，頁(yè)面上至少要有一個(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也是可以修改的。不過(guò)不同瀏覽器的對(duì)于css rules的接口描述也不同，其中ie中以類(lèi)似hash table的方式，而ff以數(shù)組方式。
從可編程性上說(shuō)，ie的接口描述更討程序員喜歡，不過(guò)從邏輯上說(shuō)，ff顯然更為合理。
我提供了類(lèi)似于ie的方式對(duì)兩套代碼進(jìn)行簡(jiǎn)單包裝，不過(guò)ie在dom的css removeRule之后并不能確定同步的把規(guī)則兌現(xiàn)。所以最好用規(guī)則覆蓋的方式而非remove。
需要注意的是，在使用改js函數(shù)的時(shí)候，頁(yè)面上至少要有一個(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樣式屬性語(yǔ)法對(duì)照表
- js中巧用cssText屬性批量操作樣式
- CSS和JS標(biāo)簽style屬性對(duì)照表(方便js開(kāi)發(fā)的朋友)
- 動(dòng)態(tài)調(diào)用CSS文件的JS代碼
- js css樣式操作代碼（批量操作）
- JS 控制CSS樣式表
- js 設(shè)置css的定位
- js CSS操作方法集合
- 用JS實(shí)現(xiàn)一個(gè)頁(yè)面多個(gè)css樣式實(shí)現(xiàn)
- JS控制CSS樣式的方法
- 如何用js控制css中的float的代碼
- 用js控制css的不錯(cuò)的方法
- JS修改css樣式style淺談
相關(guān)文章
thinkphp實(shí)現(xiàn)無(wú)限分類(lèi)（使用遞歸）
這篇文章主要介紹了在使用遞歸的情況下thinkphp實(shí)現(xiàn)無(wú)限分類(lèi)，感興趣的小伙伴們可以參考一下2015-12-12
對(duì)象無(wú)length屬性時(shí)IE6/IE7中無(wú)法將其轉(zhuǎn)換成偽數(shù)組(ArrayLike)
對(duì)象無(wú)length屬性時(shí)IE6/7中無(wú)法將其轉(zhuǎn)換成偽數(shù)組(ArrayLike) 的解決方法，需要的朋友可以參考下。2011-07-07
JavaScript在多瀏覽器下for循環(huán)的使用方法
JavaScript語(yǔ)言在不同的瀏覽器的下有存在細(xì)微的差異，但不像DOM操作差異那么大，現(xiàn)在為大家列舉出其中一個(gè)"for循環(huán)"的差異,并介紹如何有效的解決這種差異2012-11-11
JavaScript其他類(lèi)型的值轉(zhuǎn)換為布爾值的規(guī)則詳解
在JavaScript中,所有的值在邏輯上下文中都會(huì)被轉(zhuǎn)換為布爾類(lèi)型（Boolean）,理解這些轉(zhuǎn)換規(guī)則對(duì)開(kāi)發(fā)者來(lái)說(shuō)至關(guān)重要,尤其是在條件判斷、短路運(yùn)算、邏輯非（!）等場(chǎng)景下,正確掌握布爾轉(zhuǎn)換可以避免潛在的bug,本文將詳細(xì)介紹 JavaScript 其他類(lèi)型的值是如何轉(zhuǎn)換為布爾值的2025-04-04
JS如何通過(guò)FileReader獲取.txt文件內(nèi)容
今天小編就為大家分享一篇JS如何通過(guò)FileReader獲取.txt文件內(nèi)容，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-12-12
這篇文章主要介紹了JS出現(xiàn)404錯(cuò)誤原理及解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
詳解ECMAScript6入門(mén)--Class對(duì)象
本篇文章主要介紹了詳解ECMAScript6入門(mén)--Class對(duì)象，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
Js動(dòng)態(tài)設(shè)置rem來(lái)實(shí)現(xiàn)移動(dòng)端字體的自適應(yīng)代碼
這篇文章主要介紹了Js動(dòng)態(tài)設(shè)置rem來(lái)實(shí)現(xiàn)移動(dòng)端字體的自適應(yīng)代碼，代碼簡(jiǎn)單易懂非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10
JavaScript中執(zhí)行上下文和執(zhí)行棧
這篇文章主要介紹了JavaScript中執(zhí)行上下文和執(zhí)行棧，執(zhí)行上下文是評(píng)估和執(zhí)行JavaScript代碼的環(huán)境的抽象概念，更多相關(guān)介紹，感興趣的朋友可以參考一下2022-09-09
同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會(huì)受到影響。可以說(shuō)Web是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對(duì)同源策略的一種實(shí)現(xiàn)2015-11-11