看過(guò)我寫(xiě)的《用JavaScript動(dòng)態(tài)建立或增加CSS樣式表的實(shí)現(xiàn)方法》之后，你就很容易想明白如何修改CSS樣式表了。

正好今天在論壇碰到一位朋友問(wèn)這樣的一個(gè)問(wèn)題：

<style>
.ls{width=120px;}
</style>
<script>
//在這里加一句來(lái)改變.ls中width的值，如何寫(xiě)
</script>

有的朋友回答：“如果使用.ls的對(duì)象很多的話，用JS確實(shí)不方便, jquery方便,$(".ls").width(200);這樣就行”。

他是想用JQ的類(lèi)選擇器.ls選擇所有使用這個(gè)樣式的對(duì)象，對(duì)它們逐個(gè)進(jìn)行調(diào)整，而非更改CSS樣式表，所以會(huì)有“對(duì)象很多”的顧慮。

但問(wèn)題是，這只是改了那些對(duì)象的具體表現(xiàn)樣式，而并非改了.LS的設(shè)置。如果再出現(xiàn)一個(gè)使用.LS風(fēng)格的元素，它還是老樣子，你還需要對(duì)這個(gè)元素再去調(diào)整，治標(biāo)不治本。而且這種方式也決定了不可能簡(jiǎn)單地通過(guò)一句話就實(shí)現(xiàn)。

這樣想的人還不少，而如果你看了《用JavaScript動(dòng)態(tài)建立或增加CSS樣式表的實(shí)現(xiàn)方法》這篇文章之后，相信你很容易就想到如何用一句話來(lái)解決這個(gè)問(wèn)題，既簡(jiǎn)潔高效（瀏覽器會(huì)自動(dòng)重新設(shè)置所有應(yīng)用這個(gè)樣式的元素），而且真正的修改了樣式設(shè)置，新增的使用這個(gè)樣式的元素將自動(dòng)應(yīng)用被修改過(guò)的設(shè)置。于是，你已經(jīng)學(xué)到了和很多人區(qū)分開(kāi)來(lái)的更高階的知識(shí)。下面我把方法具體再說(shuō)一下：

由于上面的例子，不容易看出效果，我下面另外寫(xiě)了個(gè)例子，通過(guò)顏色的改變，比較容易看到效果：

<STYLE>
	.theforever {width:50px;color:red;}
	#theforever {width:150px;color:silver;}
</STYLE>
<div class="theforever">這里應(yīng)該是紅色的，但它會(huì)被下面的JS通過(guò)改變CSS樣式設(shè)置而變成黃色</div>
<div id="theforever">這里應(yīng)該是銀灰色的，的確這個(gè)不會(huì)發(fā)生變化，只作為對(duì)比</div>
<script>
document.styleSheets[0].cssText=document.styleSheets[0].cssText.replace(/red/g,"yellow");
//一句，不就OK了？
</script>

上面的例子，針對(duì)的不是某個(gè)特定的樣式名稱，而是泛泛的顏色（如果你直接挪到含有更為復(fù)雜的CSS頁(yè)面里，其中有不表示顏色的RED字樣，這還會(huì)導(dǎo)致錯(cuò)誤。我對(duì)不動(dòng)腦子的代碼拿來(lái)主義者一向極其反感，不作過(guò)多指示），但如果想要針對(duì)特定的樣式名稱進(jìn)行更改，同樣很容易：

從上面，可以看出document.styleSheets[0].cssText就是整個(gè)<STYLE></STYLE>內(nèi)部的內(nèi)容，相當(dāng)于一個(gè)字串變量，所以假如針對(duì).LS要改變它的設(shè)置，只需要把“.ls{width=120px;}”作為 replace 要替換的部分，把“.ls{width=555px;}”作為替換目標(biāo)，這樣就行了。

以上這篇如何用JavaScript實(shí)現(xiàn)動(dòng)態(tài)修改CSS樣式表就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論