Jquery ile yeni css kuralları eklemenin en iyi yolu?

Question

Bir web sayfasına dinamik olarak bir html ekliyorum (kullanıcının bir olayı algıladıktan sonra). Bu html biraz css styling ihtiyacı ve jQuery kullanarak, bunu yapmak için en temiz yolu nedir merak ediyorum. Web sitesi geliştiricisi değilim, bu yüzden bu kuralları orijinal css'ye ekleyemiyorum.

Zaten formElement sınıfı da dahil olmak üzere bazı html'yi stil kullanmadan eklediğimi varsayalım. Ben css yöntemi kullanabilirsiniz,

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

Veya: Dokümanıma örneği için yeni <style> blok, yazabilir

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

Hangi çözüm en iyi/en temiz mi?

DÜZENLEME:

doğrudan CSS kuralları ekleyemezsiniz gibi ben jQuery css yöntemi ile sopa olacaktır. Bazı diğer ilgili sorular yanı çözümler sunmak:

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

Gerçekten jQuery eklentileri kullanabilirsiniz, ancak eğer olabilir, kesinlikle jQuery.Rule

Tanklarının kullanırsınız hepiniz değerli yardımlarınız için.

Answer 1

Dürüst olmak gerekirse, en iyi yol ne olabilir.Bir tane seçmek zorunda kalsaydım, jquery css yöntemi, temizleyici olduğu için daha iyi performans ve temiz görünümlü kod için bu alternatifi göz önünde bulundurduğum için tercihim olurdu. Gerektiğinde öğelerinize eklemek için CSS sınıfları oluşturun. Örneğin:

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

sonra, jquery ile, ihtiyacınız olduğunda:

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

veya

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

Sana bir değişiklik yapmanız örnekleri için jQuery css yöntemi reserver ediyorum uygulayacağınız stilleri belirlemek için JavaScript değişkenlerinizin değerini kullanmanız gereken bir tür kullanıcı etkileşimi veya başka bir dinamik olaya dayanan belirli bir öğe. Zaten onları nasıl şekillendirmek istediğinizi bildiğinizden, CSS'nin işi yapmasına izin verin. Daha sonra bu sınıfın daha elemanlarını eklerseniz

Answer 2

Bu:

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

Answer 3

İkinci seçeneğiniz:

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

Bu kadar temiz çözümü gereğidir!

Answer 4

Kullanım jquery .css(propertyName, value)

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

bu sağladığınız çözümler arasında en iyisidir. ANCAK

Ben özellikleri yourCSS demek hepsi sahip bir sınıf oluşturmak için gidip o elemana sınıfını eklersiniz:

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

Answer 5

birlikte css ve js karıştırmayın özellikle özellikleriniz don' t hesaplanan içeren veya dinamik değerler: sadece sınıf

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

012 bir CSS sınıfı

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

tanımlamak ve ayarlamak

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)