javascript - 在 JavaScript 或 jQuery 中动态更改 CSS 规则

Question

我正在寻找一种方法来更改文档中导入的样式表的 CSS 规则。所以我有一个外部样式表和一些class内部div属性。我想用 JavaScript 或 jQuery 更改规则之一。

这是一个例子：

.red{
    color:red;
}

所以想法是在 JavaScript 中做一些事情，HTML 知道现在color是另一种颜色，如下所示：

.red{
    color:purple;
}

但是我希望将来通过附加的方式添加的每个元素都有这个规则。因此，如果我span在 CSS 类中添加 a .red，则文本必须是紫色而不是红色。

我希望我说清楚了。

score 23 · Accepted Answer

23

您可以将样式声明注入 DOM。

$("head").append('<style>.red { color: purple }</style>');

于 2012-08-16T15:03:42.810 回答

score 20 · Accepted Answer

你 jQuery.css()方法来做到这一点。

$('.red').css('color', 'purple');

对于多个规则：

$('.red').css({
    'color': 'purple',
    'font-size': '20px'
});

当你以后通过追加的方式向DOM添加动态元素时，只需给这些元素一些class或id并在追加它们之后编写CSS上述规则，它们将应用于所有动态创建的元素。

工作样本

在我看来，添加动态规则不是一个好的解决方案。而不是你可以加载一些外部CSS文件。

但是，如果您需要动态规则添加方法之类的东西，那么：

$('head').append(
  $('<style/>', {
    id: 'mystyle',
    html: '.red {color: purple }'
  })
);

并供将来使用：

$('#mystyle').append(' .someother { color: green; font-size: 13px } ');

score 9 · Accepted Answer

如果要添加规则，而不是直接编辑每个元素的样式，可以使用CSSStyleSheet.insertRule(). 它有两个参数：作为字符串的规则，以及插入规则的位置。

来自上述链接的示例：

// push a new rule onto the top of my stylesheet
myStyle.insertRule("#blanc { color: white }", 0);

在这种情况下，myStyle是元素的.sheet成员。style

据我所知，style元素必须先插入到文档中，然后才能抓取它的表单，并且它不能是外部表单。您还可以从中获取一张纸document.styleSheets，例如

var myStyle = document.styleSheets[1]; // Must not be a linked sheet.
myStyle.insertRule("#blanc { color: white }", 0);

注意：该页面建议通过更改其类来修改元素，而不是修改规则。