如何使jQuery的$（元素）.css（）持久的效果？

Question

例如，使用字体大小的切换器/按钮，如果我使用

    $('#container p').css('font-size', '24px');

它按预期工作，但如果我稍后将段元素添加到容器（通过ajax等），它们不会使用更新的字体大小设置样式。 我知道这是.css()方法的预期行为。 我只想问：

更改CSS选择器的样式以及使这些样式持久化的正确方法是什么？

Answer 1

是的，当你执行该命令时，它会在#container所有p元素的样式。 如果您希望它是永久性的，您可以创建一个<style />元素并在那里添加CSS样式。

---

详细说明，你可以这样做：

$(document.head).append('<style>#container p{font-size: 24px;}</style>');

Answer 2

jQuery在该行中的作用相当于：

<div id='container'>
  <p style='font-size:24px'>a</p>
  <p style='font-size:24px'>b</p>
  <p style='font-size:24px'>c</p>
</div>

对于您的特定情况，我会得到文档中的一个样式表，如下所示：

var stylesheets = document.styleSheets

返回包含insertRule方法的styleSheet 对象数组，您可以使用该方法添加新的（永久）css规则。

干杯!

Answer 3

您不能直接使用JavaScript添加样式，但是您可以这样做：

<div id="wrapper">
  <div id="paragraph1">blah</div>
  <div id="paragraph2">you</div>
</div>

和

$("#wrapper").css...

这样，您添加到包装器的任何段落都将具有新的字体大小...

Answer 4

那么你只是为现有元素添加样式，jquery无法知道新元素。

Answer 5

问题可能在于你正在摧毁你拥有风格的元素。

如果您通过AJAX引入#container的替代品，那么所有内容都将被销毁并替换为新内容。 您添加样式的所有<p>标记将不再存在，并且需要在较新的条目上重复。

你可以尝试的是动态创建一个类定义 。