2013-05-03 8 views
9

मुझे एक बाहरी स्टाइलशीट (.css फ़ाइल) दी गई है जो किसी भी तरह से परिवर्तित नहीं हो सकती है। हालांकि मुझे इस स्टाइलशीट को एक एकल div और इसलिए मेरे पहले से मौजूद वेबपृष्ठ में div की सामग्री को लागू करने की आवश्यकता है। मैं वर्तमान में स्टाइलशीट की सामग्री को टेक्स्ट के रूप में एक रिक्त शैली टैग (.innerHTML का उपयोग करके) में पाठ के रूप में पढ़ रहा हूं, जिसे मुझे प्रभावित करने की आवश्यकता है, लेकिन यह अभी भी एकल div की बजाय पूरे वेब पेज को प्रभावित करता है। क्या कोई इस से मदद कर सकता है?बाहरी स्टाइलशीट के साथ div?

+0

सीएसएस पूरे पृष्ठ को प्रभावित करता है। एकमात्र तरीका जिसे मैं अलग करना जानता हूं, ताकि यह पृष्ठ के केवल एक विशिष्ट भाग को प्रभावित करता है IFRAME का उपयोग करना है। –

+0

तो मेरे div के भीतर एक IFRAME? मैं ऐसा कर सकता हूं लेकिन फिर मैं केवल आईएफआरएएम को कैसे प्रभावित करूं? – LethalPapercut

उत्तर

9

IFRAME समाधान इस तरह काम करता है:

आपका मुख्य HTML फ़ाइल में, आप अपने DIV होगा:

<div id="myspecialdiv"> 
    <iframe width="100%" height="100%" frameborder="0" src="divcontent.html"></iframe> 
</div> 

शैली आपको इसकी आवश्यकता के रूप में है। divcontent.html फ़ाइल एक पूर्ण HTML फ़ाइल होना चाहिए, DIV टैग की सामग्री सहित, और एक लिंक अपने बाहरी स्टाइलशीट का उपयोग कर:

<html> 
    <head> 
     <link rel="stylesheet" href="path/to/external/stylesheet.css" /> 
    </head> 
    <body> 
     <!-- The contents of your DIV --> 
    </body> 
</html> 
+0

द्वारा पीटा गया कहता है कि मुझे कई बाहरी स्टाइलशीट दिए गए हैं। मैं रनकटाइम पर divcontent.html को उन सभी को जोड़ने के बारे में कैसे जाउंगा? मैं एक वेब एप्लिकेशन पर काम करने में व्यस्त हूं जो लगातार नई हो जाती है। सीएसएस फाइलें – LethalPapercut

+0

यह आपके रनटाइम पर निर्भर करती है, जिस भाषा का आप वेब एप्लिकेशन विकसित करने के लिए उपयोग कर रहे हैं, जिस फ्रेम पर यह आधारित है, और आपके एप्लिकेशन की आर्किटेक्चर। लेकिन कोई आवश्यकता नहीं है कि 'divcontent.html' फ़ाइल वास्तव में HTML हो - यह HTML हो सकती है (उदाहरण: PHP, aspx, आदि)। उत्तर आपको अवधारणा देता है - आपको इसे अपनी विशिष्ट आवश्यकताओं के अनुरूप अनुकूलित करना होगा। –

6

यदि आप HTML5 के साथ काम कर सकते हैं, तो आप scoped styles का उपयोग करने का प्रयास कर सकते हैं। आप इसे केवल अपने माता-पिता को प्रभावित होने, div अंदर सीएसएस शामिल हो सकते हैं:

<div> 
    <style scoped> 
     // Styles here 
    </style> 
</div> 
+0

एक अद्भुत समाधान की तरह लगता है लेकिन यह मेरी ज़रूरतों को पूरा नहीं करता है क्योंकि स्कॉप्ड विशेषता अभी तक किसी भी प्रमुख ब्राउज़र में समर्थित नहीं है। – LethalPapercut

+0

मैं बाहरी सीएसएस फाइलों से लिंक करना चाहता हूं और ऐसा लगता है कि