你如何使用 Javascript 添加 CSS?

IT技术 javascript css
2021-01-12 19:56:54

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

6个回答

简单直接的方法是创建一个新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)
这个解决方案要好得多!想象一下,您有多个样式表:使用@bobince 解决方案,您新添加的 CSS 可能会被第二个/第三个/等覆盖。页面上的样式表。使用document.body.appendChild(css);你确保新的 CSS 始终是最后的规则。
2021-03-11 19:56:54
@bobince — 根据 HTML 规范,绝对可以,但所有浏览器都可以在任何地方识别它们。document.body输入也更短,执行速度更快,document.getElementsByTagName("head")[0]并避免了 insertRule/addRule 的跨浏览器问题。
2021-03-15 19:56:54
它不应该附加到文档的头部而不是正文吗?
2021-03-20 19:56:54
在所有最近的浏览器中,您都可以使用document.head.appendChild.
2021-03-20 19:56:54
解决方案后面应该跟着一个长长的“duhhhh”。不敢相信我没有想到。
2021-03-27 19:56:54

你也可以使用 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。

谢谢,当我需要的只是在这两行上刷新我的记忆时,Google 首先显示的所有示例都非常庞大
2021-03-15 19:56:54
我知道已经有一段时间了,但是当我测试第一个时,我得到了 SecurityError: The operation is insecure.
2021-03-16 19:56:54
“颜色”.. 哦,是的,oop!谢天谢地,这只是一个例子。我怀疑可能有一个 DOM 方法,谢谢!+1
2021-03-19 19:56:54
sheet 来自sheet = window.document.styleSheets[0] (你必须至少有一个 <style type="text/css"></style> 那里)。
2021-03-22 19:56:54
@user10089632 您正在访问的样式表需要从与父文档相同的主机提供服务才能正常工作。
2021-04-05 19:56:54

Ben Blank 的解决方案在 IE8 中对我不起作用。

但是这在 IE8 中确实有效

function addCss(cssCode) {
var styleElement = document.createElement("style");
  styleElement.type = "text/css";
  if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = cssCode;
  } else {
    styleElement.appendChild(document.createTextNode(cssCode));
  }
  document.getElementsByTagName("head")[0].appendChild(styleElement);
}
好老的 IE 总是让生活更轻松
2021-03-21 19:56:54
您应该将元素附加到head before设置.cssText,否则 IE6-8 将崩溃如果cssCode包含 @ -directive ,例如@import@font-face,请参阅更新到phpied.com/dynamic-script-and-style-elements-in-iestackoverflow .com/a/7952904
2021-04-09 19:56:54

这是Chris Herring 解决方案的略微更新版本,考虑到您也可以使用innerHTML,而不是创建新的文本节点:

function insertCss( code ) {
    var style = document.createElement('style');
    style.type = 'text/css';

    if (style.styleSheet) {
        // IE
        style.styleSheet.cssText = code;
    } else {
        // Other browsers
        style.innerHTML = code;
    }

    document.getElementsByTagName("head")[0].appendChild( style );
}
您应该将元素附加到head before设置.cssText,否则 IE6-8 将崩溃如果code包含 @ -directive ,例如@import@font-face,请参阅更新到phpied.com/dynamic-script-and-style-elements-in-iestackoverflow .com/a/7952904
2021-04-09 19:56:54

最短的一个班轮

// One liner function:
const addCSS = s => document.head.appendChild(document.createElement("style")).innerHTML=s;

// Usage: 
addCSS("body{ background:red; }")