[英]Dynamically change CSS rules in JavaScript or jQuery
I'm looking for a way to change the CSS rules of my stylesheet imported in the document. 我正在寻找一种方法来更改文档中导入的样式表的CSS规则。 So I have an external stylesheet and some class
and div
attributes inside. 所以我有一个外部样式表和一些class
和div
属性。 I want to change one of the rules with JavaScript or jQuery. 我想用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 color
is 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 span
with the CSS class .red
, the text has to be purple and not red. 因此,如果我使用CSS类.red
添加一个span
,则文本必须是紫色而不是红色。
I hope I made it clear. 我希望我说清楚。
您可以将样式声明注入DOM。
$("head").append('<style>.red { color: purple }</style>');
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 class
or id
and write CSS
rules like above after appending them and they will applied for all dynamically created element. 当你通过append的方式将DOM中的动态元素添加到DOM中时,只需给这些元素添加一些class
或id
并在添加它们之后编写如上所述的CSS
规则,它们将应用于所有动态创建的元素。
Add dynamic rules is not a good solution in my point of view. 在我看来,添加动态规则并不是一个好的解决方案。 Instead of the you can load some external CSS
file. 而不是你可以加载一些外部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 } ');
If you want to add a rule, instead of editing each element's style directly, you can use CSSStyleSheet.insertRule()
. 如果要添加规则,而不是直接编辑每个元素的样式,可以使用CSSStyleSheet.insertRule()
。 It takes two parameters: the rule as a string, and where to insert the rule. 它需要两个参数:规则作为字符串,以及插入规则的位置。
Example from the above link: 以上链接示例:
// push a new rule onto the top of my stylesheet
myStyle.insertRule("#blanc { color: white }", 0);
In this case, myStyle
is the .sheet
member of a style
element. 在这种情况下, myStyle
是style
元素的.sheet
成员。
As far as I can tell, the style
element must be inserted into the document before you can grab its sheet, and it can't be an external sheet. 据我所知,必须先将style
元素插入到文档中,然后才能抓取其表单,并且它不能是外部表单。 You can also grab a sheet from document.styleSheets
, eg 您还可以从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. 注意:该页面建议通过更改其类来修改元素,而不是修改规则。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.