एक विशिष्ट डीआईवी

Question

के लिए बाहरी सीएसएस लोड करें तो मूल रूप से मेरे पास एक पृष्ठ है जिसमें इसका अपना सीएसएस है। मेरे सर्वर पर मेरे पास अलग-अलग सीएसएस स्टाइल फाइलों का एक फ़ोल्डर है, इसलिए मैं उनके लिए अपने पेज पर "पूर्वावलोकन" विंडो चाहता हूं। क्या मैं किसी भी तरह से जावास्क्रिप्ट का उपयोग कर सकता हूं, केवल एक बाहरी सीआईवी फ़ाइल को एक निश्चित डीआईवी पर लागू कर सकता हूं, पूरे पृष्ठ पर नहीं, इसलिए मुझे कस्टम सीएसएस फ़ाइल का "पूर्वावलोकन" मिल सकता है? मैं iframes का उपयोग नहीं करना चाहूंगा।

Answer 1

सीएसएस पूरे दस्तावेज़ों पर लागू होता है।

यदि आप दायरे को सीमित करना चाहते हैं, तो आपको एक वंशज चयनकर्ता का उपयोग करने की आवश्यकता है।

उदा। #id_of_div .the .rest .of .the .selector {}

आप हर चयनकर्ता को यह लागू होते हैं, और खाते groups में ले जाना है (इसलिए यह न सिर्फ पूरे स्टाइलशीट लगाकर और प्रत्यय लगाना जितना आसान है हर })

तुम भी के लिए स्टाइलशीट मिलेगा आपके दस्तावेज़ में आवेदन करने वाला मुख्य दस्तावेज़।

शायद इस समस्या को हल करने के लिए एक फ्रेम सबसे अच्छा तरीका होगा।

Answer 2

आप पूर्वावलोकन पृष्ठ लोड करने के लिए एक आईफ्रेम का उपयोग कर सकते हैं या पृष्ठ में सीएसएस को गतिशील रूप से लोड कर सकते हैं। लेकिन, यदि आप शैलियों को केवल div पर लागू करके चाहते हैं, तो आपको div के आईडी के साथ अपने सीएसएस चयनकर्ताओं को उपसर्ग करना होगा। #div-id #element-inside-div { }।

उस में लोड हो रहा है कुछ इस तरह लग सकता है के लिए स्क्रिप्ट:

var cssFile = document.createElement("link"); 
cssFile.rel = "stylesheet"; 
cssFile.type = "text/css"; 
cssFIle.href = "file.css"; 
document.getElementsByTagName("head")[0].appendChild(cssFile); 

Answer 3

तरह क्वेंटिन कहा, तुम दायरे को सीमित करने वंशज का भी उपयोग करेंगे। less जैसी कुछ मदद कर सकती है।

#MyDiv { 
    @import "bootstrap.less"; 
} 

"bootstrap.css" नाम दिया जाना चाहिए (या लिंक किया गया) करने के लिए "bootstrap.less: उदाहरण के लिए, मैं करने के लिए" bootstrap.css "" my.less "में केवल #MyDiv पर लागू होता है, चाहते हैं "। रन:

lessc my.less my.css 

आयातित फ़ाइल में प्रत्येक चयनकर्ताओं को #MyDiv जोड़ देगा।

Answer 4

अपनी परियोजनाओं में से एक के लिए, मैं बिल्कुल वही बात की जरूरत है, लेकिन यह भी सीएसएस संस्करण में समर्थित होना 2.
वेब पर एक लंबी खोज के बाद, मैं कुछ भी उपयोगी नहीं मिला था, इसलिए मैं करने का निर्णय लिया जावास्क्रिप्ट का उपयोग करके इस कार्यक्षमता को बनाया है जो वास्तव में डीओएम में एक विशिष्ट तत्व के लिए एक संपूर्ण सीएसएस लागू करने में सक्षम हो सकता है।

बस नीचे दिए गए (jQuery पुस्तकालय पर निर्भर) वर्णित है, समारोह applyCSSFileToElement फोन:

function renderCSSForSelector(css, selector) { 
    return ((css+"")||"").replace(/\n|\t/g, " ") 
     .replace(/\s+/g, " ") 
     .replace(/\s*\/\*.*?\*\/\s*/g, " ") 
     .replace(/(^|\})(.*?)(\{)/g, function($0, $1, $2, $3) { 
     var collector = [], parts = $2.split(","); 
     for (var i in parts) { 
      collector.push(selector + " " + parts[i].replace(/^\s*|\s*$/, "")); 
     } 
     return $1 + " " + collector.join(", ") + " " + $3; 
    }); 
} 

function applyCSSToElement(css, elementSelector) { 
    $("head").append("<style type=\"text/css\">" + renderCSSForSelector(css, elementSelector) + "</style>"); 
} 

function applyCSSFileToElement(cssUrl, elementSelector, callbackSuccess, callbackError) { 
    callbackSuccess = callbackSuccess || function(){}; 
    callbackError = callbackError || function(){}; 
    $.ajax({ 
     url: cssUrl, 
     dataType: "text/css", 
     success: function(data) { 
      applyCSSToElement(data, elementSelector); 
      callbackSuccess(); 
     }, 
     error: function(jqXHR) { 
      callbackError(); 
     } 
    }) 
} 

कार्य स्पष्टीकरण:

• renderCSSForSelector - असल में प्रत्येक शैली परिभाषा के लिए एक चयनकर्ता पहले जोड़ता।
• applyCSSToElement - सीएसएस स्रोत डेटा लेता है, renderCSSForSelector लागू करता है और इसे हेड टैग में इंजेक्ट करता है।
• applyCSSFileToElement - एक विशिष्ट क्षेत्र (elementSelector) डोम में में एक सीएसएस फ़ाइल (cssUrl) लागू होता है। कॉलबैक SUccess को तब कॉल किया जाता है जब फ़ाइल सफलतापूर्वक लोड हो जाती है और सीएसएस लागू किया गया है। कॉलबैक त्रुटि को तब कहा जाता है जब सीएसएस फ़ाइल लोड करने में त्रुटि होती है।

शुभकामनाएं!