Il modo migliore per aggiungere nuove regole css con jquery?

Question

Inserisco dinamicamente dell'Html in una pagina Web (dopo che ho rilevato un evento dall'utente). Questo html ha bisogno di alcuni stili CSS e mi chiedo quale sia il modo più pulito per farlo, usando jQuery. Non sono lo sviluppatore del sito web, quindi non posso aggiungere quelle regole al css originale.

Suppongo di aver già inserito alcuni html senza stile, tra cui una classe formElement. Posso scrivere nel mio documento una nuova <style> blocco, per esempio:

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); 

Oppure, posso utilizzare il metodo css:

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

Quale soluzione è il migliore/più pulito?

EDIT:

Come non posso aggiungere direttamente le regole del CSS, continuerò con il metodo di jQuery css. Alcune altre questioni correlate forniscono soluzioni così:

• Create a CSS rule/class with jQuery at runtime
• Changing CSS Rules using JavaScript or jQuery

Non posso utilizzare i plugin jQuery, ma se potessi, certamente utilizzare jQuery.Rule

Grazie tutti voi per il vostro prezioso aiuto.

Answer 1

Onestamente, il modo migliore potrebbe essere nessuno dei due.Se dovessi sceglierne uno, sarebbe il mio metodo jquery css, solo perché è più pulito, tuttavia, considera questa alternativa per prestazioni migliori e un codice più pulito:

Crea classi CSS da aggiungere ai tuoi elementi quando necessario. Per esempio:

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

poi, con jQuery, quando ne avete bisogno:

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

o

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

avrei reserver il metodo di jQuery css per le istanze in cui è necessario modificare un elemento specifico basato su una sorta di interazione dell'utente o altro evento dinamico che richiede l'utilizzo del valore delle variabili JavaScript per determinare gli stili che si stanno applicando. Dal momento che sembra che tu sappia già come vuoi modellarli, lascia che i CSS facciano il loro lavoro.

Answer 2

questo:

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

Answer 3

La seconda opzione:

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

Questo è di gran lunga la soluzione più pulita!

Answer 4

utilizzare jQuery .css(propertyName, value)

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

questo è migliore tra le soluzioni che ci avete fornito.

TUTTAVIA vorrei andare per la creazione di una classe con tutto ciò che le proprietà dicono yourCSS e aggiungere la classe a quell'elemento:

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

Answer 5

Non mescolare CSS e JS insieme, soprattutto se le proprietà don' t contengono calcolato o valori dinamici: solo definire una classe CSS

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

e impostare la classe

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

Answer 6

HTML

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

JS

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)