jquery के साथ नए सीएसएस नियम जोड़ने का सबसे अच्छा तरीका?

Question

मैं वेब पेज पर गतिशील रूप से कुछ एचटीएमएल डालने वाला हूं (उपयोगकर्ता से एक घटना का पता लगाने के बाद)। इस एचटीएमएल को कुछ सीएसएस स्टाइल की जरूरत है और मैं सोच रहा हूं कि jQuery का उपयोग करके इसे करने का सबसे साफ तरीका क्या है। मैं वेबसाइट डेवलपर नहीं हूं, इसलिए मैं उन नियमों को मूल सीएसएस में नहीं जोड़ सकता।

मान लें कि मैंने बिना किसी स्टाइल के कुछ 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' 
}); 

कौन सा समाधान सबसे अच्छा/साफ है?

संपादित करें:

नहीं मैं सीधे सीएसएस में नियम जोड़ सकते हैं के रूप में, मैं jQuery के css विधि के साथ चिपके रहते हैं जाएगा। कुछ अन्य संबंधित प्रश्नों के रूप में अच्छी तरह से समाधान प्रदान करते हैं:

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

मैं वास्तव में jQuery प्लगइन का उपयोग नहीं कर सकते हैं, लेकिन अगर मैं कर सकता, मैं निश्चित रूप से jQuery.Rule

धन्यवाद का प्रयोग करेंगे आप सभी अपनी बहुमूल्य मदद के लिए।

Answer 1

ईमानदारी से, सबसे अच्छा तरीका न तो हो सकता है।अगर मुझे एक चुनना पड़ा, तो jquery 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 विधि संचयकर्ता हैं कुछ प्रकार के उपयोगकर्ता इंटरैक्शन या अन्य गतिशील घटना के आधार पर विशिष्ट तत्व जिसके लिए आप अपनी शैलियों को निर्धारित करने के लिए अपने जावास्क्रिप्ट चर के मूल्य का उपयोग करने की आवश्यकता रखते हैं। चूंकि ऐसा लगता है कि आप पहले ही जानते हैं कि आप उन्हें कैसे शैली बनाना चाहते हैं, सीएसएस को काम करने दें। यदि आप बाद में उस वर्ग के साथ और अधिक तत्वों को जोड़ने

Answer 2

यह:

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

Answer 3

आपका दूसरा विकल्प:

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

यह अभी तक साफ समाधान कर रहा है!

Answer 4

jQuery उपयोग .css(propertyName, value)

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

इस समाधान आपके द्वारा दिया गया के बीच सबसे अच्छा है।

हालांकि मैं वह सब गुण yourCSS कहना के साथ एक वर्ग बनाने के लिए जाने के लिए और उस तत्व को वर्ग जोड़ना होगा:

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

Answer 5

CSS और JS मिश्रण एक साथ नहीं है, खासकर अगर अपने गुण डॉन ' टी अभिकलन होते हैं या डायनामिक मानों: सिर्फ एक CSS वर्ग

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

वर्ग

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

012 को परिभाषित करने और सेट

Answer 6

एचटीएमएल

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