用 JavaScript 修改樣式元素

利用 <style> 元素，咱們能夠在網頁中嵌入樣式表。若是須要動態增長 <style> 元素，彷佛能夠用以下的 JavaScript 代碼：

var style = document.createElement("style");
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
style.type = "text/css";
style.id = "some-id";
style.innerHTML = css;

可是，這樣直接用 style.innerHTML 有兩個問題：一是在 IE 8- 這樣使用會出現錯誤，二是樣式表中的一些特殊字符可能會致使問題，改用 innerText 或者 textContent 也許更好。

實際上，更穩妥的方法應該是從 css 內容建立一個子文本節點，而後添加到 style 元素中。例如：

var style = document.createElement("style");
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
style.type = "text/css";
style.id = "some-id";
if (style.styleSheet) { // IE8
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

一樣的，針對 IE8- 須要另外處理。

建立了樣式表以後，若是須要添加或者刪除某個樣式規則，能夠用以下的方式：

var style = document.getElementById("some-id"),
    sheet = style.sheet || style.styleSheet;

if (sheet.insertRule) {
  sheet.insertRule("body: {color: green;}", 0);
} else if (sheet.addRule) {
  sheet.addRule("body", "color: green;", 0); // IE8-
}

if (sheet.deleteRule) {
  sheet.deleteRule(0);
} else if (sheet.removeRule) {
  sheet.removeRule(0); // IE8-
}

其中的參數 0 表示所插入或者刪除的樣式規則的位置。一樣的，在 IE8- 中沒有標準的 style.sheet 以及 sheet.insertRule 和 sheet.deleteRule，因此咱們改用 IE 專有的方法。

參考資料：
[1] Creating Style Node, and IE headaches - Stack Overflow
[2] CSSStyleSheet.insertRule - Web API Interfaces | MDN
[3] CSSStyleSheet.deleteRule - Web API Interfaces | MDN
[4] IHTMLStyleSheet::addRule method (Internet Explorer)
[5] IHTMLStyleSheet::removeRule method (Internet Explorer)