你如何用Javascript添加CSS？

如何strong { color: red }使用Javascript 添加CSS规则(例如)？

1> Ben Blank..：

---

简单直接的方法是创建并向style文档添加新节点.

// Your CSS as text
var styles = `
    .qwebirc-qui .ircwindow div { 
        font-family: Georgia,Cambria,"Times New Roman",Times,serif;
        margin: 26px auto 0 auto;
        max-width: 650px;
    }
    .qwebirc-qui .lines {
        font-size: 18px;
        line-height: 1.58;
        letter-spacing: -.004em;
    }

    .qwebirc-qui .nicklist a {
        margin: 6px;
    }
`

var styleSheet = document.createElement("style")
styleSheet.type = "text/css"
styleSheet.innerText = styles
document.head.appendChild(styleSheet)

---

它不应该附加到文件的头部而不是身体吗？

---

在所有最近的浏览器中,您只需使用`document.head.appendChild`即可.

---

@bobince - 完全根据HTML规范,但所有浏览器都能在任何地方识别它们.`document.body`的输入时间也比`document.getElementsByTagName("head")[0]`更短,并且避免了insertRule/addRule的跨浏览器问题.

---

解决方案之后应该是一个长"duhhhh".简直不敢相信我没想到.

---

这个解决方案要好得多!想象一下,你有多个样式表:使用@bobince解决方案,新添加的CSS可能会被第二个/第三个/等覆盖.页面上的样式表.使用`document.body.appendChild(css);`确保新CSS始终是最后一条规则.

2> bobince..：

---

您也可以使用DOM Level 2 CSS接口(MDN)执行此操作:

var sheet = window.document.styleSheets[0];
sheet.insertRule('strong { color: red; }', sheet.cssRules.length);

...除了(自然)IE之外的所有IE,它使用自己的略微不同的措辞:

sheet.addRule('strong', 'color: red;', -1);

与createElement-set-innerHTML方法相比,这有一个理论上的优势,因为你不必担心在innerHTML中放入特殊的HTML字符,但在实践中,样式元素是遗留HTML中的CDATA,而'<'而且'''很少用在样式表中.

您需要一个样式表,然后才能开始像这样添加样式表.这可以是任何现有的活动样式表:外部,嵌入或空,无关紧要.如果没有,那么目前创建它的唯一标准方法是使用createElement.

---

sheet来自`sheet = window.document.styleSheets [0]`(你必须至少有一个