注入新的 CSS 规则 | CSS-Tricks

如果您需要使用 JavaScript 更改元素的样式，通常最好更改类名，并让页面上已有的 CSS 生效并更改样式。但是，每个规则都有例外情况。例如，您可能希望以编程方式更改伪类（例如 :hover）。您不能通过 JavaScript 执行此操作，原因与内联 style="" 属性无法更改伪类相同。

您需要将一个新的 <style> 元素注入到页面中，其中包含正确的样式。最好将其注入到页面底部，以便它覆盖上面的 CSS。使用 jQuery 很容易

function injectStyles(rule) {
  var div = $("<div />", {
    html: '&shy;<style>' + rule + '</style>'
  }).appendTo("body");    
}

用法

injectStyles('a:hover { color: red; }');

演示

更多信息

IE 中的样式注入问题（Ryan Seddon）。
Stack Overflow 线程.

Patrick Neal

# 2013 年 1 月 1 日

好的帖子，但仅仅添加一个只更改悬停状态的类不是更好吗？例如，添加一个 .hoverChange 类，并在 CSS 中添加一个像 .hoverChange:hover{ color: red; } 这样的规则？

Chris Coyier

评论永久链接# 2013 年 1 月 1 日

可能。但你无法知道所有可能的情况。就像我在上面提到的，如果你需要以编程方式计算样式是什么？
sgnl

评论永久链接# 2017 年 11 月 21 日

我喜欢 Patrick 的说法，也喜欢 Chris 的说法。我认为文章的一个好的折衷方案是同时提及这两种模式和用例，并为未来的读者提供示例，他们可能是有经验或没有经验的 CSS 开发者。
steve Veerhoff

评论永久链接# 2017 年 12 月 12 日

感谢这篇文章！针对 Patrick 的回复，我们正在使用此函数来设置定义的样式，但颜色和背景颜色由存储在数据库中的表单输入确定。例如，我们有一个名为 sub_unit 的字段，用户确定子单元的名称，该名称将成为一个类。填写表单时，填写表单的人员会选择字体颜色和背景颜色，并将其应用于新定义的类。

由于我们无法控制子单元名称是什么，因此此代码段允许我们在读取表单数据时动态设置 CSS。

Rodney Rehm

# 2013 年 1 月 1 日

样式元素不应该是放在 head 中吗，因为它毕竟是元数据内容。也就是说，除非存在 scope 属性……参见 style 元素

Chris Coyier

评论永久链接# 2013 年 1 月 1 日

是的，但是从来没有一个浏览器在无论你把它放在哪里它都不起作用。我认为使用 body 而不是 head 安全性提高了 0.0001%。仔细想想，我认为最安全的方法是定位它可以找到的第一个 script 标签（肯定有某个地方有一个，因为这是正在运行的 JavaScript）并在其后插入 style 元素。

TeMc

# 2013 年 1 月 3 日

<div> 和 （而不是仅仅 <style>）是一个笨拙但必要的弊端。但是要注意 html: 而不是 text()。这意味着它没有转义。如果您在字符串中使用特殊字符，而这些字符在 CSS 中预计不会转义，但如果未转义，则元素会将 HTML 视为 HTML，这可能会导致问题

pre[data-foo="css"] {
    content: "</style>"
}

此外，您可能希望通过使用以下方法来保持 dom 更简洁

function injectStyles(rule) {
  // Works in IE6
  var div = document.createElement('div');
  div.innerHTML = '&shy;<style>' + rule + '</style>';
  document.body.appendChild(div.childNodes[1]);
}

或

function injectStyles(rule) {
  // Works in IE6
  var div = $("<div />", {
    html: '&shy;<style>' + rule + '</style>'
  }).children().appendTo("body");    
}

Dr. Clue

# 2013 年 5 月 7 日

这个实际上更有趣一些，因为您可以创建几乎任何您可以在样式表中创建的 CSS，使用浏览器支持的任何选择器，并且它们可以是

document.styleSheets[0].insertRule(“body {background:red;}”, 0);
document.styleSheets[0].deleteRule(0)

0 是位置索引。我实际上为此类东西写了一个类，它可以执行诸如检测和映射标准 CSS 到供应商前缀、为 CSS3D 内容（如轮播、立方体、金字塔（带纹理））生成可重用 CSS、操纵关键帧规则等操作。它甚至会告诉我所有影响元素、元素或甚至匹配正则表达式查询的元素的类。提及其他内容的原因仅仅是为了指出在规则级别实际上可以完成多少事情。

Elise Chant

# 2014 年 2 月 5 日

最好给 div 一个 id，以便您可以轻松地处理它，并且只实例化一次。

injectStyles: function(id, rule) {
    var $div = "<div id='"+ id +"'><style>"+ rule + "</style></div>";

    if ($('body ' + id).length === 0) {
        $($div).appendTo('body');
    }
}

Danny Povolotski

# 2014 年 2 月 6 日

同意。我实际上非常确定 jQuery 推广了一种非常糟糕的 CSS 样式方法（内联样式）。它很慢，而且如果你仔细想想的话没有意义（将 CSS 应用于一个类不会保留到该类的新的元素）。

CSS 注入似乎确实是可行的方法。

我编写了 veinjs 就是为了这个目的
https://github.com/israelidanny/veinjs

Garlaro

# 2014 年 10 月 7 日

谢谢，非常有帮助！
我需要一个“无框架”函数，所以这是它（基于以上所有内容）
http://stackoverflow.com/a/26230472/2752979
代码和演示

Faisal

# 2015 年 9 月 23 日

我试图改进这篇文章的代码，通过创建一个 js 方法，该方法会动态添加一个 style 标签和规则到文档 body 或提供的容器元素中。

请参阅链接以获取工作示例
http://codepen.io/anon/pen/qOaZBw

Tabish

# 2018 年 5 月 22 日

每次我们点击时，都会在 body 标签中附加一个新的 div，如何删除现有的 div 然后再附加？

infonota

# 2018 年 12 月 23 日

重要：在规则中添加 !important
injectStyles(‘a:hover { color: red !important; }’);

用法

演示

更多信息

评论

发表评论 取消回复

发表评论取消回复