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

Question

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

这是一个例子:

.red{
    color:red;
}

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

.red{
    color:purple;
}

但是我希望以后通过append的方式添加的每一个元素都有这个规则。因此，如果我添加一个带有 CSS 类 .red 的 span，文本必须是紫色而不是红色。

我希望我说清楚了。

Answer 1

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

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