如何使jQuery的$（元素）.css（）持久性的影響？

例如，字體大小切換器/按鈕，如果我用

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

它按預期工作，但如果我稍後添加段落元素到容器（通過AJAX，等等），它們不是風格的與更新的字體大小。我知道這是.css()方法的預期行爲。我只是問：

什麼是正確的方法來改變一個CSS選擇器的風格，並使這些風格持久？

來源

2011-02-02 anonymous coward

我正在選擇Alexsander Akers的回答，這個**警告**：如果需要樣式的持久性，並且所有元素*可能不在相同容器中，則添加/刪除樣式表對象可能是最好的選擇。 **但是**，在所有元素都在同一個父元素中的情況下，應該通過`toggleClass（）`或`addClass（）方法創建一個樣式/類定義並在**父/容器**上進行切換。 `/`removeClass（）`。 – 2011-02-04 19:26:10

沒錯，當你執行該命令時，它會在#container中設置所有p元素。如果你希望它是永久的，你可以創建一個<style />元素並在那裏添加CSS樣式。

要詳細，你可以做這樣的事情：

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

來源

2011-02-02 01:30:35

這是可以接受的情況下，用戶可以切換樣式？ – 2011-02-02 02:00:48

我想最好的做法是創建多個樣式規則，並簡單地切換父/容器元素上的類。我只是認爲jQuery可能會爲您處理全局規則更改。謝謝！ – 2011-02-02 02:20:40

爲我工作$（''） .appendTo（'head'） .html（'div.myClass {background：yellow;}'）; – molokoloco 2011-10-15 01:23:55

那麼你要添加的風格元素退出只，有沒有辦法讓jQuery來了解新的元素。

來源

2011-02-02 01:31:21 Victor

我同意。希望它能夠成爲一個清晰的例子，說明我的預期效果是否清晰。感謝您的輸入！ – 2011-02-02 01:59:08

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 objects數組，您可以使用它來添加新的（永久）css規則。

乾杯！

來源

2011-02-02 01:32:07

請注意，`insertRule（）`是Firefox特定的。嘗試[jQuery.Rule插件]（http://flesler.blogspot.com/2007/11/jqueryrule.html）以實現跨瀏覽器兼容性。 – Orbling 2011-02-02 01:37:20

你不能直接添加的風格瓦特/ JavaScript的，但卻可以做到這一點：

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

和

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

這樣你添加到包裝紙上的任何一款都會有新的字體大小...

來源

2011-02-02 01:33:49 JCOC611

問題可能是你正在破壞你有風格的元素。

如果您通過AJAX引入#container的替代品，則所有內容都將被銷燬並替換爲新內容。您添加樣式的所有<p>標籤將不再存在，並且需要在新條目中重複。你可以嘗試創建一個class definition on the fly。

來源

2011-02-02 01:36:09 Orbling

如何使jQuery的$（元素）.css（）持久性的影響？

回答

相關問題