Javascript控制CSS Rules

用Javascript來產生CSS規則時, 一個土法鍊鋼的方法是這樣:

但是這樣會有一個問題, 就是在頁面切換的情況下, CSS會充滿重覆的規則。

所以一個修正的方法是這樣:

其中, selectorText是選擇器的名稱, 而因為str只是個字串, 所以要自己處理一下, 擷取出選擇器名稱。

為什麼要用trim()呢? 雖然className分大小寫, 但是在瀏覽器裡面, 選擇器名稱不分大小寫, 直接呼叫出來看會發現全都是小寫的.

這方法哪裡不好呢?

document.createElementNS 與 document.head.appendChild 的運作下, 你打開瀏覽器偵錯視窗看看, 會發現 <head></head> 裡面有一大堆的 <style type="text/css"></style>

 

另一個比較快又直接的方法是插入新的rule

insertRule有兩個參數, 第一個是規則的內容, 第二個是索引值, 就是要插到哪裡去, 如果要插到第一筆, 索引值用0即可。

BUT!

這方法一樣會讓重覆規則留在裡面, 所以還是跑一下迴圈去處理掉比較好喔。

 

Leave a Reply

你的電子郵件位址並不會被公開。 必要欄位標記為 *