看過我寫的《用JavaScript動態建立或增加CSS樣式表的實現方法》之後，你就很容易想明白如何修改CSS樣式表了。
正好今天在論壇碰到一位朋友問這樣的一個問題：
<style>
.ls{width=120px;}
</style>
<script>
//在這裡加一句來改變.ls中width的值，如何寫
</script>
有的朋友回答：“如果使用.ls的對象很多的話，用JS確實不方便, jquery方便,$(".ls").width(200);這樣就行”。
他是想用JQ的類選擇器.ls選擇所有使用這個樣式的對象，對它們逐個進行調整，而非更改CSS樣式表，所以會有“對象很多”的顧慮。
但問題是，這只是改了那些對象的具體表現樣式，而並非改了.LS的設置。如果再出現一個使用.LS風格的元素，它還是老樣子，你還需要對這個元素再去調整，治標不治本。而且這種方式也決定了不可能簡單地通過一句話就實現。
這樣想的人還不少，而如果你看了《用JavaScript動態建立或增加CSS樣式表的實現方法》這篇文章之後，相信你很容易就想到如何用一句話來解決這個問題，既簡潔高效（浏覽器會自動重新設置所有應用這個樣式的元素），而且真正的修改了樣式設置，新增的使用這個樣式的元素將自動應用被修改過的設置。於是，你已經學到了和很多人區分開來的更高階的知識。下面我把方法具體再說一下：
由於上面的例子，不容易看出效果，我下面另外寫了個例子，通過顏色的改變，比較容易看到效果：
<STYLE>
.theforever {width:50px;color:red;}
#theforever {width:150px;color:silver;}
</STYLE>
<div class="theforever">這裡應該是紅色的，但它會被下面的JS通過改變CSS樣式設置而變成黃色</div>
<div id="theforever">這裡應該是銀灰色的，的確這個不會發生變化，只作為對比</div>
<script>
document.styleSheets[0].cssText=document.styleSheets[0].cssText.replace(/red/g,"yellow");
//一句，不就OK了？
</script>
上面的例子，針對的不是某個特定的樣式名稱，而是泛泛的顏色（如果你直接挪到含有更為復雜的CSS頁面裡，其中有不表示顏色的RED字樣，這還會導致錯誤。我對不動腦子的代碼拿來主義者一向極其反感，不作過多指示），但如果想要針對特定的樣式名稱進行更改，同樣很容易：
從上面，可以看出document.styleSheets[0].cssText就是整個<STYLE></STYLE>內部的內容，相當於一個字串變量，所以假如針對.LS要改變它的設置，只需要把“.ls{width=120px;}”作為 replace 要替換的部分，把“.ls{width=555px;}”作為替換目標，這樣就行了。
以上這篇如何用JavaScript實現動態修改CSS樣式表就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。