गतिशील रूप से जावास्क्रिप्ट

Question

मैं एक विजेट है कि बाहरी वेबसाइटों में जोड़ दिया जाएगा बना रही हूँ के माध्यम से पृष्ठ पर सीएसएस जोड़ने के लिए, और उन्हें यह (पाठ रंग, पृष्ठभूमि रंग, फ़ॉन्ट आकार, आदि) शैली के लिए मैं एक पेज है कि सीएसएस उत्पन्न कर दिया है । मैं उनकी वेबसाइट पर कॉपी/पेस्ट करने के लिए उनके लिए सीएसएस से भरे एक टेक्स्टरेरा के साथ समाप्त होता हूं।

क्या लाइव पूर्वावलोकन करने के लिए इस पृष्ठ को वर्तमान पृष्ठ पर जोड़ने का कोई तरीका है?

Answer 1

आप इसे में पाठ क्षेत्र की सामग्री के साथ डोम के लिए एक style टैग को जोड़ने सकता है? आप इसे एक आईडी देना चाहते हैं ताकि आप इसे बाद में बदल सकें।

Answer 2

मैं आपको अपने वेब/जावास्क्रिप्ट विकास के लिए एक सभ्य रूपरेखा का उपयोग शुरू करने की सलाह देता हूं, व्यक्तिगत रूप से मैं jQuery के साथ जाऊंगा।

http://api.jquery.com/css/ 

यहां कुछ कोड स्निपेट हैं जो आपको दिखाते हैं कि तत्वों के लिए सीएसएस गुणों को जल्दी से कैसे सेट करें।

Answer 3

मैं पारंपरिक रूप से एक <style> ब्लॉक संलग्न है जब तत्वों कर।

var style_rules = []; 

style_rules.push("#" + myElemId + " { /* Rules */ } "); 
/* ... */ 

var style = '<style type="text/css">' + style_rules.join("\n") + "</style>"; 
$("head").append(style); 

नोट करने के लिए एक महत्वपूर्ण बात है क्योंकि आप जानते हैं कि नहीं क्या मौजूदा शैलियों के किसी भी है, या क्या id के पृष्ठ पर प्रतिकूल हो सकती हैं, तो यह आपके आईडी का ट्रैक रखने के लिए अंदर बहुत उपयोगी है आपके जावास्क्रिप्ट एप्लिकेशन, फिर उन इंजेक्शन <style> ब्लॉक को पॉप्युलेट करने के लिए उपयोग करें। मैं भी सुनिश्चित करना है कि wrapper, और unit के जेनेरिक नाम विरोध में नहीं हैं (वे myunique_wrapper और myunique_unit की तरह कुछ में बदल जाता है।

शामिल #myWrapper {margin: 0; padding: 0} की तरह एक बुनियादी सीएसएस रीसेट एक हो सकता है एक उपसर्ग समारोह के माध्यम से अपने नाम को चलाने के लिए करते हैं अपनी खुद की कस्टम शैलियों के निर्माण के लिए सभ्य प्रारंभिक मंच।

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

Answer 4

क्या आप सीएसएस फ़ाइल जोड़ने के लिए

var link = document.createElement('link'); 
link.setAttribute('rel', 'stylesheet'); 
link.setAttribute('type', 'text/css'); 
link.setAttribute('href', 'css/my.css'); 
document.getElementsByTagName('head')[0].appendChild(link); 

Answer 5

var element = document.createElement('style'); 
element.setAttribute('type', 'text/css'); 

if ('textContent' in element) { 
    element.textContent = css; 
} else { 
    element.styleSheet.cssText = css; 
} 

document.getElementsByTagName('head')[0].appendChild(element);