你如何用Javascript添加CSS？

javascript css

2022-08-30 01:09:53

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

答案 1

简单直接的方法是创建新节点并将其添加到文档中。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)

答案 2

您也可以使用 DOM 级别 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。