例如,字體大小切換器/按鈕,如果我用
$('#container p').css('font-size', '24px');
它按預期工作,但如果我稍後添加段落元素到容器(通過AJAX,等等),它們不是風格的與更新的字體大小。我知道這是.css()
方法的預期行爲。我只是問:
什麼是正確的方法來改變一個CSS選擇器的風格,並使這些風格持久?
例如,字體大小切換器/按鈕,如果我用
$('#container p').css('font-size', '24px');
它按預期工作,但如果我稍後添加段落元素到容器(通過AJAX,等等),它們不是風格的與更新的字體大小。我知道這是.css()
方法的預期行爲。我只是問:
什麼是正確的方法來改變一個CSS選擇器的風格,並使這些風格持久?
沒錯,當你執行該命令時,它會在#container
中設置所有p
元素。如果你希望它是永久的,你可以創建一個<style />
元素並在那裏添加CSS樣式。
要詳細,你可以做這樣的事情:
$(document.head).append('<style>#container p{font-size: 24px;}</style>');
這是可以接受的情況下,用戶可以切換樣式? – 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: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規則。
乾杯!
請注意,`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...
這樣你添加到包裝紙上的任何一款都會有新的字體大小...
問題可能是你正在破壞你有風格的元素。
如果您通過AJAX引入#container
的替代品,則所有內容都將被銷燬並替換爲新內容。您添加樣式的所有<p>
標籤將不再存在,並且需要在新條目中重複。你可以嘗試創建一個class definition on the fly。
我正在選擇Alexsander Akers的回答,這個**警告**:如果需要樣式的持久性,並且所有元素*可能不在相同容器中,則添加/刪除樣式表對象可能是最好的選擇。 **但是**,在所有元素都在同一個父元素中的情況下,應該通過`toggleClass()`或`addClass()方法創建一個樣式/類定義並在**父/容器**上進行切換。 `/`removeClass()`。 – 2011-02-04 19:26:10