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

我正在寻找一种方法来更改导入到文档中的样式表的CSS规则。因此，我有一个外部样式表和一些

class

和

div

属性。我想用JavaScript或jQuery更改其中一条规则

以下是一个例子：

.red{
    color:red;
}

因此，我们的想法是在JavaScript中做一些事情，HTML知道现在

颜色是另一种类似这样的颜色：

.red{
    color:purple;
}

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

我希望我说得很清楚。
您可以使用jQuery方法来实现这一点

$('.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 }'
  })
);

可以将样式声明注入DOM

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

$（“head”）.append（'.red{color:purple}'）；
如果要添加规则，而不是直接编辑每个元素的样式，可以使用。它需要两个参数：作为字符串的规则和插入规则的位置

上述链接中的示例：

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

在本例中，
myStyle
是
样式
元素的
工作表
成员

据我所知，
style
元素必须先插入到文档中，然后才能获取其工作表，而且它不能是外部工作表。您还可以从
文档中获取一张工作表

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

注意：该页面建议通过更改元素的类来修改元素，而不是修改规则。
这是否满足“但我希望在以后通过追加的方式添加的每个元素都有此规则”？我想，在“myrule”之后需要一个逗号。当然，最后一部分会使.css（）内容变得多余吗？嗯，这不起作用（至少在Chrome中是这样）。您需要添加
.red{color:purple；}
，而不仅仅是
color:purple到样式标记。这样做会使
append（）
也停止工作（除非您附加了第二个.red声明，我想）。它工作得很好！！再次感谢！！这正是我需要的再次感谢你！！很抱歉这么晚才回复，但我没有在电脑前！！再次感谢你！！顺便说一句，我在发布问题之前尝试了.css，但它不起作用，所以我想覆盖我的css，看看它是否能起作用！：）再次感谢@thecodeparadox！！在我看来，这样做通常是个坏主意，但我会提高投票率，因为它完全符合OP的要求，为所有元素添加了风格，包括以后添加到DOM中的元素。有趣的是-你为什么认为这是个坏主意-因为很难逆转？@Grim。。。这也很难追踪：根据JS的复杂性，很难调试为什么某些东西没有按您期望的方式出现。但在某些情况下，这是有用的--我提出这个问题是因为我需要知道如何为Greasemonkey脚本执行此操作。。。
var myStyle = document.styleSheets[1]; // Must not be a linked sheet.
myStyle.insertRule("#blanc { color: white }", 0);