javascript - 动态创建元素的持久性 css 规则更改

Question

我想永久修改 css 规则(这样新元素将采用此 css 规则)。似乎所有使用 css 的 jquery 修改都不会持续存在(比如为 future 元素修改背景颜色在创建它们时不会持续存在):

$(".red").css("background-color", "blue");

在这里看我的 fiddle :

https://jsfiddle.net/Lvm0c7m6/

我希望所有 future 的元素现在都有由 css 创建的新规则，有没有办法做到这一点(具有良好的跨浏览器支持)。

Answer 1

您在执行时命令 javascript 将内联样式添加到类为“红色”的所有元素，将它们着色为蓝色。之后，您将新元素添加到 DOM。他们不知道先前的命令，因此不受它们的影响。

这解决了您的问题，因为这向文档添加了样式规则。这会影响所有元素并且是“持久的”:

$( "<style>.red { background: blue; }</style>" ).appendTo( "body" );

参见:https://jsfiddle.net/aLghL2ke/

请注意，如果您想多次运行此命令，最好从您的代码中删除旧样式 block 。这也可以通过 jQuery 使用以下命令完成:

$( "body style" ).remove();

参见:https://jsfiddle.net/4duxsz0a/