如何使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>標記將不再存在，並且需要在較新的條目上重復。

你可以嘗試的是動態創建一個類定義 。