在目前style sheet插入一個新的style實作方法_javascript技巧

很少會插入一個新的style rule，今天為了暫時解決頁面樣式問題，需要更新很多頁面的一些樣式，這些頁面都引用了一個公共的js，為了方便，直接在這個公共的js裡面向style sheet插入新的style rule。

先看程式碼：

複製程式碼 程式碼如下:

*
* 在文件中添加樣式表規則（可能是更好的做法，
* 動態更改類，因此樣式資訊可以保留在
* 真正的樣式表中（並避免向DOM 添加額外的元素) ))
* 請注意，聲明和規則需要一個數組，因為ECMAScript
* 無法提供可預測的物件迭代順序，而且CSS
* 順序相關（即，它是級聯的） ；那些不需要
* 級聯規則的人可以建立一個更訪客友善的基於物件的API。
* @param {Array} decls 接受JSON 編碼聲明的陣列
* @example
addStylesheetRules([
['h2', // 也接受第二個參數作為陣列的陣列而是
['color', 'red'],
['background-color', 'green', true] // 'true' ！ 重要法則
],
['. myClass' ,
['背景顏色', '黃色']
]
]);
*/
function addStylesheetRules (decls) {
var style = document.createElement('style');
document.getElementsByTagName('head')[0].appendChild(style);
if (!window.createPopup) { /* For Safari */
style.appendChild(document.createTextNode(''));
}
var s = document.styleSheets[document.styleSheets .length - 1];
for (var i=0, dl = decls.length; i var j = 1, decl = decls[i], selector = decl[0] , rulesStr = '';
if (Object.prototype.toString.call(decl[1][0]) === '[object Array]') {
decl = decl[1];
j = 0;
}
for (var rl=decl.length; j var rule = decl[j];
rulesStr = rule[0] ': ' rule[1] (rule[2] ? ' !important' : '') ';n';
}
if (s.insertRule) {
s.insertRule(selector '{' rulesStr '}', s.cssRules.length);
}
else { /* IE */
s.addRule(selector, rulesStr, -1);
}
}
}

複製程式碼 程式碼如下:

程式碼如下:

div.content", ["color": "#000"], ["border-width","1px"], ["border-style", "solid"]])

執行後目前document的head標籤內，多了一個style

複製程式碼

程式碼如下:

程式碼如下:

知道怎麼呼叫了吧，每次呼叫都會插入一個新的style，所以最好呼叫一次，插入多個rule

複製程式碼

程式碼如下:

程式碼如下:


addStylesheetRules(
[selector, [attr, value], …],
[selector, [attr, value], …]
);

主要用到兩個方法： 標準方法：stylesheet.insertRule(rule, index) rule：被插入的rule，如div.content{color:#000} index: 插入順序，先後順序會影響樣式的。從0開始firefox、chrome、opera、safri、ie從ie9開始也支持這個方法ie的stylesheet.addRule (selector, styleDef [, positionIndex]); selector：如div.content styleDef：如color:#000 positionIndex：預設-1，插入到末尾ie、safari、chrome支援這個方法