如何使用 Javascript 添加 CSS？

Question

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

原文由 nickf 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您也可以使用 DOM Level 2 CSS 接口 ( MDN ) 来做到这一点：

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

…除了（自然）IE8 和之前的所有版本，它使用自己略有不同的措辞：

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

与 createElement-set-innerHTML 方法相比，这有一个理论上的优势，因为您不必担心在 innerHTML 中放置特殊的 HTML 字符，但实际上样式元素是旧版 HTML 中的 CDATA 和 ‘<‘无论如何，’&’ 很少在样式表中使用。

您确实需要一个样式表，然后才能开始像这样附加它。这可以是任何现有的活动样式表：外部的、嵌入的或空的，没关系。如果没有，目前创建它的唯一标准方法是使用 createElement。

原文由 bobince 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

简单直接的方法是创建一个新的 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.innerText = styles
document.head.appendChild(styleSheet)

原文由 Ben Blank 发布，翻译遵循 CC BY-SA 4.0 许可协议