在 JavaScript 或 jQuery 中动态更改 CSS 规则
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11990089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically change CSS rules in JavaScript or jQuery
提问by Simon
I'm looking for a way to change the CSS rules of my stylesheet imported in the document. So I have an external stylesheet and some classand divattributes inside. I want to change one of the rules with JavaScript or jQuery.
我正在寻找一种方法来更改文档中导入的样式表的 CSS 规则。所以我有一个外部样式表class，div里面有一些和属性。我想用 JavaScript 或 jQuery 更改规则之一。
Here is an example :
这是一个例子：
.red{
color:red;
}
So the idea is to do something in JavaScript and the HTML knows that now the coloris another color like this:
所以这个想法是在 JavaScript 中做一些事情，HTML 知道现在color是另一种颜色，如下所示：
.red{
color:purple;
}
But I want to have this rule for every element that I add in the future by the way of append. So if I add a spanwith the CSS class .red, the text has to be purple and not red.
但是我想对我将来通过追加的方式添加的每个元素都有这个规则。因此，如果我span在 CSS 类中添加一个.red，则文本必须是紫色而不是红色。
I hope I made it clear.
我希望我说清楚了。
采纳答案by thecodeparadox
You jQuery .css()method to do that.
你 jQuery.css()方法来做到这一点。
$('.red').css('color', 'purple');
For multiple rules:
对于多个规则：
$('.red').css({
'color': 'purple',
'font-size': '20px'
});
When you add dynamic element in future to DOM by the way of append, just give those element some classor idand write CSSrules like above after appending them and they will applied for all dynamically created element.
当你以后通过追加的方式向DOM添加动态元素时，只需给这些元素一些class或在追加后id编写CSS如上的规则，它们将应用于所有动态创建的元素。
Working sample
工作样本
Note
笔记
Add dynamic rules is not a good solution in my point of view. Instead of the you can load some external CSSfile.
在我看来，添加动态规则不是一个好的解决方案。而不是您可以加载一些外部CSS文件。
But if you need something like dynamic rules add method then:
但是如果你需要类似动态规则添加方法的东西，那么：
$('head').append(
$('<style/>', {
id: 'mystyle',
html: '.red {color: purple }'
})
);
And for future use:
并供将来使用：
$('#mystyle').append(' .someother { color: green; font-size: 13px } ');
Working sample
工作样本
回答by Grim...
You can inject style declarations into the DOM.
您可以将样式声明注入 DOM。
$("head").append('<style>.red { color: purple }</style>');
回答by leewz
If you want to add a rule, instead of editing each element's style directly, you can use CSSStyleSheet.insertRule(). It takes two parameters: the rule as a string, and where to insert the rule.
如果要添加规则，而不是直接编辑每个元素的样式，可以使用CSSStyleSheet.insertRule(). 它需要两个参数：作为字符串的规则，以及插入规则的位置。
Example from the above link:
来自上述链接的示例：
// push a new rule onto the top of my stylesheet
myStyle.insertRule("#blanc { color: white }", 0);
In this case, myStyleis the .sheetmember of a styleelement.
在这种情况下，myStyle是元素的.sheet成员style。
As far as I can tell, the styleelement must be inserted into the document before you can grab its sheet, and it can't be an external sheet. You can also grab a sheet from document.styleSheets, e.g.
据我所知，style必须先将元素插入到文档中，然后才能抓取其工作表，并且它不能是外部工作表。您还可以从 中抓取一张纸document.styleSheets，例如
var myStyle = document.styleSheets[1]; // Must not be a linked sheet.
myStyle.insertRule("#blanc { color: white }", 0);
Note: The page recommends modifying elements by changing their classes, instead of modifying the rules.
注意：页面建议通过更改元素的类来修改元素，而不是修改规则。
