用jQuery添加新的CSS規則的最佳方法？

我在網頁上動態地插入一些html（在檢測到用戶的事件後）。這個html需要一些CSS樣式，我想知道什麼是使用jQuery最乾淨的方法。我不是網站開發人員，所以我不能將這些規則添加到原始CSS中。用jQuery添加新的CSS規則的最佳方法？

假設我已經插入了一些html而沒有樣式，包括一個formElement類。我可以在我的文檔中編寫一個新的<style>塊，例如：

my_html = '<style type="text/css">'; 
my_html += ' .formElement {'; 
my_html += '  display: block;'; 
my_html += '  width: 240px;'; 
my_html += '  position: relative;'; 
my_html += '  padding: 4px 0;'; 
my_html += ' }'; 
my_html += '</style>'; 
my_html = $(my_html); 
$('body').prepend(my_html);

或者，我可以使用css方法：

$('.formElement').css({ 
    'display': 'block', 
    'width': '240px', 
    'position': 'relative', 
    'padding': '4px 0' 
});

哪個解決方案是最好的/乾淨？

編輯：

正如我不能直接在CSS中添加規則，我會堅持使用jQuery的css方法。其他一些相關的問題提供解決方案，以及：

我真的不能使用jQuery插件，但如果我可以，我肯定會用jQuery.Rule

謝謝你們都爲你們提供寶貴的幫助。

來源

2013-01-03 clement g

你的第二個代碼將無法正常工作。 – Dogbert

另外考慮第二個選項將更具體，因爲它是內聯的。 – scoota269

老實說，最好的辦法可能既不是。如果我不得不挑選一個，那麼jquery css方法將是我的選擇，只是因爲它更乾淨，但是，考慮此替代方案以獲得更好的性能和更清晰的代碼：

創建CSS類以在需要時附加到元素。例如：

.formElementAlpha { 
    width:240px; 
    padding:4px 0; 
} 
.formElementBravo { 
    width:400px; 
    height:50px; 
    padding:20px 0; 
    line-height:50px; 
    font-size:30px; 
}

然後，使用jQuery，當你需要它：

$('.formElement').addClass('formElementAlpha');

或

$('.formElement[name="bigUsernameInput"]').addClass('formElementBravo');

我將儲庫在您需要修改實例的jQuery css方法基於某種用戶交互或其他動態事件的特定元素，需要您使用JavaScript變量的值來確定您正在應用的樣式。由於看起來您已經知道如何設計它們，所以讓CSS來完成這項工作。如果你用的是類加入更多的元素後

來源

2013-01-03 09:36:18

謝謝您的詳細解答。我想你是對的不喜歡任何方法。我喜歡你的建議，但事情是我不是網站開發人員，所以我無法創建CSS類。我只能通過JavaScript與頁面進行交互......但我會在其他項目中記住這一點！ –

最好的辦法可能是採用[此處]列出的方法（http://stackoverflow.com/a/2076345/1279409），然後在任何瀏覽器中都能正常工作。 –

此：

$('.formElement').css({ 
     'display': 'block', 
     'width': '240px', 
     'position': 'relative', 
     'padding': '4px 0' 
    });

來源

2013-01-03 09:26:14

這是很難做@media這種方式查詢時，必要* – jfeust

你的第二個選項：

$('.formElement').css({ 
    'display': 'block', 
    'width': '240px', 
    'position': 'relative', 
    'padding': '4px 0' 
});

這是迄今爲止最乾淨的解決方案！

來源

2013-01-03 09:26:54

使用jQuery .css(propertyName, value)

$('.formElement').css({ 
    'display': 'block', 
    'width': '240px', 
    'position': 'relative', 
    'padding': '4px 0' 
});

這是最好的，你所提供的解決方案之一。

無論其我會去與所有性質說yourCSS創建類和類添加到元素：

$('.formElement').addClass('yourCSS');

來源

2013-01-03 09:27:07 bipen

不要混合使用CSS和JS在一起，特別是如果你的屬性別噸包含計算的或動態值：只需定義一個CSS類

.mystyle { 
    display: block; 
    width: 240px; 
    position: relative; 
    padding: 4px 0; 
}

和設置類

$('.formElement').addClass('mystyle');

來源

2013-01-03 09:28:17 fcalderan

當然這有問題，用jQuery來定義一個新的CSS類的最佳方式是什麼？ – BeniBela

法布里奇奧解決方案與OP所需要的一樣，並且與他的兩個選項相同。它會比OP發佈的更快。他不是給元素賦予樣式屬性，而是添加一個包含元素屬性的類。同樣的事情，更好的代碼組織。 –

@AndréSilva絕對。我們在2013年，標記，CSS和腳本湯的時間早已逝去。 :) – fcalderan

HTML

<style id="customCSS"> ... </style>

my_html += ' .formElement {'; 
my_html += '  display: block;'; 
my_html += '  width: 240px;'; 
my_html += '  position: relative;'; 
my_html += '  padding: 4px 0;'; 
my_html += ' }'; 
$('#customCSS').html(my_html)

來源

2015-07-28 14:35:02

用jQuery添加新的CSS規則的最佳方法？

回答

相關問題