有没有一种方法可以通过Javascript/jQuery动态定义css规则?

Is there a way to define css rules dynamically via Javascript/jQuery?

本文关键字：动态 jQuery 定义 css 规则 Javascript 可以通过 方法 一种 有没有      更新时间：2023-09-26

对于我的问题，我怀疑很多人可能会混淆动态样式(通过jQuery的。CSS()函数可以实现的功能)和动态CSS规则。第一种情况是，它只改变与选择器匹配的现有元素的样式。但是我要做的是调整规则，以便任何匹配选择器的新元素也将使用(动态)规则。

作为一个例子，让我们以类"pane"的div集合为例。

我可以使用$(".pane").css({"background-color": "#00f"});更改现有窗格的背景颜色

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

我不明白为什么添加/更改CSS规则不是默认行为?有人知道W3C工作组讨论过这个问题吗?

有人知道是否可以动态添加或更改客户端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;}"))
相关文章：