有没有办法通过Javascript / jQuery动态定义css规则？

Question

根据我的问题，我怀疑很多人可能会对动态样式（通过jQuery的.css（）函数和动态CSS规则可以实现的东西感到困惑。第一个是它只改变匹配选择器的现有元素的样式但我所追求的是调整规则，以便匹配选择器的任何新元素也将使用该（动态）规则。

作为一个例子，让我们采用一组带有“窗格”类的DIV。

我可以使用$(".pane").css({"background-color": "#00f"});

更改现有窗格的背景颜色

但如果我再添加一个新窗格$("body").append("<div class='pane'></div>");，它将不会使用这种新样式，因为它不是一个规则。

我不明白为什么添加/更改CSS规则不是默认行为？ W3C工作组是否曾向任何人的知识讨论过这个问题？

是否有人知道是否可以动态地在客户端添加或更改CSS规则（即无需与服务器通信）？

Answer 1

您可以使用以下方法将样式标记中的css附加到页眉：

$("<style>").prop("type","text/css").html(".pane{background-color: #00f;}").appendTo("head");

或

$("head").append($("<style>").prop("type","text/css").html(".pane{background-color: #00f;}"))