用 JavaScript 修改样式元素

浏览数：20 / 时间：2015年06月09日

利用 <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-
}