JS addRule()和insertRule()方法：新增CSS樣式

在 JavaScript 中，使用 addRule() 方法可以為樣式表增加一個樣式。用法如下：

styleSheets.addRule(selector, style, [index])

styleSheets 表示樣式表參照，引數說明如下：

• selector：表示樣式選擇符，以字串的形式傳遞。
• style：表示具體的宣告，以字串的形式傳遞。
• index：表示一個索引號，表示新增樣式在樣式表中的索引位置，預設為 -1，表示位於樣式表的末尾，該引數可以不設定。

Firefox 支援使用 insertRule() 方法新增樣式。用法如下：

styleSheet.insertRule(rule, [index])

引數說明如下：

• rule：表示一個完整的樣式字串。
• index：與 addRule() 方法中的 index 引數作用相同，但預設為 0，放置在樣式表的末尾。

範例

在下面範例中，先在文件中定義一個內部樣式表，然後使用 styleSheets 集合獲取當前樣式表，利用陣列預設屬性 length 獲取樣式表中包含的樣式個數，最後在指令碼中使用 addRule() （或 insertRule()）方法增加一個新樣式，樣式選擇符為 p，樣式宣告背景色為紅色，字型顏色為白色，段落內部補白為 1 個字型大小。

<style type="text/css">
    #box { color:green; }
    .red { color:red; }
    .blue { color:blue; }
</style>
<script>
    window.onload = function(){
        var styleSheets = document.styleSheets[0];  //獲取樣式表參照
        var index = styleSheets.length;  //獲取樣式表中包含樣式的個數
        if(styleSheets.insertRule){  //判斷瀏覽器是否支援insertRule()方法
            //使用insertRule()方法在文件內部樣式表中增加一個p標籤選擇符的樣式，設定段落背景色為紅色，字型顏色為白色，補白為一個字型大小。插入位置在樣式表的末尾，
            styleSheets.insertRule("p{background-color:red;color:#fff;padding:1em;}", index);
        }else{  //如果哦瀏覽器不支援insertRule()方法
            styleSheets.addRule("P", "background-color:red;color:#fff;padding:1em;", index);
        }
    }
</script>
<p>在樣式表中增加樣式操作</p>

儲存頁面，在瀏覽器中預覽，效果如下所示：

---