जावास्क्रिप्ट

Question

के साथ डायनामिक रूप से सीएसएस लागू करें गतिशील रूप से स्टाइल को लागू करने का एक अच्छा तरीका क्या है (यानी जावास्क्रिप्ट के साथ HTML तत्वों में शैलियों का मान रनटाइम पर बनाया गया है)?

मैं एक घटक (मूल रूप से, एक वस्तु) में एक जावास्क्रिप्ट विजेट (जेएस, सीएसएस और मार्कअप) पैकेज करने का एक तरीका ढूंढ रहा हूं। यह विचार स्टाइल को समाहित करने के लिए घटक के लिए होगा (इसलिए उपयोगकर्ताओं को सीधे सीएसएस को संशोधित करने और अप्रत्यक्ष रूप से लागू होने वाले परिवर्तनों के अधिक कसकर युग्मित दृष्टिकोण की बजाय इसे संशोधित करने के लिए एक अच्छा एपीआई है)। समस्या यह है कि एक एकल एपीआई कॉल कई स्टाइल तत्वों में परिवर्तन का संकेत दे सकता है।

जिस तरह से मैं यह करूँगा वह सीएसएस का निर्माण करना है और style उचित तत्वों में योगदान देना है (संभवतः मार्कअप के अन्य क्षेत्रों में परिवर्तन लागू करने से बचने के लिए आईडी का उपयोग करना)। क्या यह एक अच्छा समाधान है? इसे करने का कोई बेहतर तरीका है?

Answer 1

जिस तरह से मैं करता हूं वह सीएसएस का निर्माण करना और शैली तत्व को उचित तत्वों में सेट करना है। उदाहरण के लिए:

var div = document.createElement('div'); 
div.setAttribute("style", "color: blue, margin-top:5px"); 
document.body.appendChild(div); 

इस कोड शैली color: blue, margin-top:5px के साथ एक नया div तत्व बना सकते हैं और पेज से संलग्न होगा।

Answer 2

Jquery का उपयोग

सीएसएस() फ़ंक्शन का उपयोग मौजूदा तत्वों के लिए शैली लागू करने के लिए जहां एक वस्तु युक्त शैलियों पारित:

var styles = { 
    backgroundColor : "#ddd", 
    fontWeight: "" 
}; 
$("#myId").css(styles); 

तुम भी समय में एक शैली लागू कर सकते हैं साथ:

$("#myId").css("border-color", "#FFFFFF"); 

Vanil ला जे एस:

var myDiv = document.getElementById("#myId"); 
myDiv.setAttribute("style", "border-color:#FFFFFF;"); 

Css साथ :

तुम भी एक अलग सीएसएस फ़ाइल का उपयोग कर सकते कक्षाओं के अंदर की जरूरत विभिन्न शैलियों से युक्त, और संदर्भ आप जोड़ना पर निर्भर करता है या अपने तत्वों को उन वर्गों को दूर ।

अपने सीएसएस फ़ाइल में आप

.myClass { 
    background-color: red; 
} 

.myOtherClass { 
    background-color: blue; 
} 

फिर जोड़ने के लिए या एक तत्व के एक वर्ग को दूर करने के jQuery का उपयोग कर, की तरह कक्षाएं हो सकता है, तो आप उपयोग कर सकते हैं

$("#myDiv").addClass('myClass'); 

या

$("#myDiv").removeClass('myClass'); 

मुझे लगता है कि यह एक क्लीनर तरीका है क्योंकि यह आपकी शैली को आपके तर्क से अलग करता है। लेकिन अगर आपके सीएसएस के मूल्य सर्वर द्वारा लौटाए गए कार्यों से निर्भर करते हैं, तो इस समाधान को लागू करना मुश्किल हो सकता है।

Answer 3

मैं आपके प्रश्न का गलत व्याख्या कर सकता हूं, लेकिन ऐसा लगता है जैसे आप एक साधारण वास्तुकला पैटर्न मांग रहे हैं। आप ऐसा कुछ चाहते हैं जो किसी ऐसे व्यक्ति के लिए आसान हो जो आपके विजेट का उपयोग अपने विनिर्देशों में बदलने के लिए कर रहा हो?

यदि ऐसा है, तो मुझे सीएसएस का उपयोग किये बिना ऐसा करने के लिए किसी विशेष पैटर्न के बारे में पता नहीं है।

मैं आपको बता सकता हूं कि "विजेट्स" जिन्हें मैंने उपयोग करने के लिए सबसे आसान पाया है, में अलग-अलग सीएसएस फ़ाइलें हैं। मैंने इसे अपनी जरूरतों के अनुसार संशोधित करने के लिए काफी सरल पाया है। मुझे लगता है कि ऐसा इसलिए है क्योंकि एचटीएमएल और जावास्क्रिप्ट के साथ सीएसएस का उपयोग करने की संरचना पहले से ही एक अच्छा, सरल पैटर्न है। मुझे नहीं पता कि कुछ भी बेहतर है, विशेष रूप से यह मानते हुए कि लोग एचटीएमएल/सीएसएस संबंध से पहले ही परिचित हैं।