利用 <style> 元素，我们可以在网页中嵌入样式表。如果需要动态增加 <style> 元素，似乎可以用如下的 JavaScript 代码：
|
1
2
3
4
5
6 |
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 元素中。例如：
|
1
2
3
4
5
6
7
8
9
10 |
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- 需要另外处理。
创建了样式表之后，如果需要添加或者删除某个样式规则，可以用如下的方式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
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)
原文：http://www.cnblogs.com/zoho/p/3523129.html