नियंत्रित सीएसएस मोज़िला और क्रोम लेकिन नहीं IE

इम इस समारोह को लागू करने के सीएसएस (एक पाठ चर का उपयोग कर) के साथ समस्या हो इंटरनेट एक्सप्लोरर के साथ काम करने के साथ काम करता है, लेकिन यह फ़ायरफ़ॉक्स & क्रोम में काम करता है।नियंत्रित सीएसएस मोज़िला और क्रोम लेकिन नहीं IE

the code:

/*! addCssStyle() applies the text value $CssText$ to the the specified document 
$Doc$ e.g. an IFrame; or if none specified, default to the current document, 
*/function addCssStyle(CssText, Doc){ 

//Secure $Head$ for the current $Doc$ 
    Doc = Doc||document; var head = Doc.getElementsByTagName('head')[0]; 
    if(!head || head == null){ 
     head = Doc.createElement('div'); Doc.body.appendChild(head); 
    } if(!head || head == null){return false;} 

//createElement('style') 
    var PendingStyle = Doc.createElement('style'); 
// if (is_gecko){PendingStyle.href = 'FireFox.css';}//???needeed??? 
    PendingStyle.type = 'text/css'; 
    PendingStyle.rel = 'stylesheet'; 
// PendingStyle.media = 'screen';//???needeed??? 
    PendingStyle.innerHTML = CssText; 
    head.appendChild(PendingStyle); 

}/*___________________________________________________________________________*/

the use of the function:

var NewSyleText = //The page styling 
"h1, h2, h3, h4, h5 {font-family: 'Verdana','Helvetica',sans-serif; font-style: normal; font-weight:normal;}" + 
"body, b {background: #fbfbfb; font-style: normal; font-family: 'Cochin','GaramondNo8','Garamond','Big Caslon','Georgia','Times',serif;font-size: 11pt;}" + 
"p { margin: 0pt; text-indent:2.5em; margin-top: 0.3em; }" + 
"a { text-decoration: none; color: Navy; background: none;}" + 
"a:visited { color: #500050;}" + 
"a:active { color: #faa700;}" + 
"a:hover { text-decoration: underline;}"; 
addCssStyle(NewSyleText);//inserts the page styling

स्रोत

2010-04-25 GlassGhost

तुम क्यों इस तरह सीएसएस जोड़ना चाहते हैं? –

@ केन अच्छी तरह से सर्वर पर प्रत्येक फ़ाइल अनुरोध अलग फ़ाइलों की तुलना में सर्वर पर अधिक कर लगा रहा है। इसके अलावा मैं ऊब गया था। – GlassGhost

मुझे खुशी है कि यह एक दिलचस्प सवाल है; अन्यथा, मैं सिर्फ "प्लस, मैं ऊब गया था" के लिए इसे ऊपर उठाने का लुत्फ उठाऊंगा। :- डी –

var style = document.createElement('style');

नई शैली और स्क्रिप्ट जोड़ना डोम तरीकों का उपयोग कर तत्वों बनाने के द्वारा कुछ है कि हमेशा dicey किया गया है पार ब्राउज़र है। यह आईई या वेबकिट में काम नहीं करेगा।

style.rel = 'stylesheet'; 
style.href = 'FireFox.css';

HTMLStyleElement पर ऐसी कोई संपत्ति नहीं है। <style> में इनलाइन कोड शामिल है। बाहरी स्टाइलशीट के लिए, <link> का उपयोग करें। भाग्य से, यह करता है काम होता है:

var link= document.createElement('link'); 
link.rel= 'stylesheet'; 
link.href= 'something.css'; 
head.appendChild(link);

लेकिन आप स्क्रिप्ट से नियमों को सम्मिलित करने के लिए एक सुविधाजनक तरीका नहीं देता है।

आप document.styleSheets इंटरफ़ेस का उपयोग कर मौजूदा स्टाइलशीट (उदाहरण के लिए <head> में खाली style) में नए नियम भी जोड़ सकते हैं। दुर्भाग्य से, IE के इंटरफेस काफी यहां मानक से मेल नहीं खाता है ताकि आप कोड शाखाओं की जरूरत है:

var style= document.styleSheets[0]; 
if ('insertRule' in style) 
    style.insertRule('p { margin: 0; }', 0); 
else if ('addRule' in style) 
    style.addRule('p', 'margin: 0', 0);

स्रोत

2010-04-25 23:23:48 bobince

यह सभी प्रमुख ब्राउज़रों (क्रोम/सफारी/एफएफ/ओपेरा/आईई) IE6,7 सहित पर काम करने के परीक्षण किया गया है +8:

function createCSS(css, doc) { 
    doc = doc || document; 
    var style = doc.createElement("style"); 
    style.type = "text/css"; 

    if (!window.opera && 'styleSheet' in style && 'cssText' in style.styleSheet) { 
     // Internet Explorer 6-8 don't support adding text nodes to 
     // styles, so use the proprietary `styleSheet.cssText` instead 
     style.styleSheet.cssText = css; 
    } 
    else { 
     // Otherwise use the standard method 
     style.appendChild(doc.createTextNode(css)); 
    } 

    // Note the `|| document.body` as getting the 
    // head doesn't always work on e.g. Safari 1.0 
    var head = doc.getElementsByTagName("head")[0] || doc.body; 

    // Add the new style of higher priority than the last 
    // ones if there's already other elements in the head 
    if (head.firstChild) { 
     head.insertBefore(style, head.firstChild); 
    } 
    else { 
     head.appendChild(style); 
    } 
}

के रूप में है कि कोड लिखा है, यह एक और पथ के सापेक्ष बनाने के लिए संशोधित करना पड़ सकता है दस्तावेज़ इसलिए प्रस्तुत किया जा रहा के सापेक्ष है, या आप सीएसएस में पूर्ण छवि रास्तों इस्तेमाल कर सकते हैं।

संपादित करें: हटाया सभी innerHTML अधिक मानक createTextNode का उपयोग करते समय संभव और विभिन्न चीजों को साफ करने के पक्ष में संदर्भ।

स्रोत

2010-04-26 02:18:18 cryo

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

'हटाएं _CSS' की आवश्यकता नहीं है। यह कोई त्रुटि नहीं देगा लेकिन यह कुछ भी नहीं करता है क्योंकि केवल वस्तुओं के गुण हटा दिए जा सकते हैं। –

आपको एक नई लाइन बनाने से बचने के लिए div को एक अवधि के साथ प्रतिस्थापित करना चाहिए। – xavierm02

मैं जानता हूँ कि यह एक पुराने धागा है, लेकिन मैं सीएसएस शैलियों dynamicly कि सभी आम/प्रमुख ब्राउज़रों के साथ काम करता डालने के लिए एक समाधान के लिए देख रहा था। मैं आपके साथ अपना समाधान साझा करना चाहता हूं। डेविड का समाधान अच्छी तरह से काम नहीं करता है (क्षमा करें)। मैं एक टूलटिप जावास्क्रिप्ट/jQuery वर्ग कि उदाहरण के लिए इनलाइन शैलियों के साथ काम कर सकते हैं, लेकिन यह भी सीएसएस स्टाइल शैलियों के साथ काम कर सकते हैं बना दिया है। (ऑफटॉपिक: क्लास ऑटो टूल टूल को डिफ़ॉल्ट टूलटिप्स की तरह संरेखित कर सकता है)।

हो सकता है कि आपको आश्चर्य क्या लाभ जब आप ऊपर के उदाहरण की तरह सीएसएस सम्मिलित हैं। ठीक है, आप शैलियों के साथ एक अतिरिक्त सीएसएस फ़ाइल की जरूरत नहीं है और आप dynamicly स्क्रिप्ट से शैलियों में जोड़ सकते हैं और जब आप छवियों के साथ काम कर आप dynamicly छवियों पथ बदल सकते हैं अगर आप चाहते हैं (ताकि आप किसी भी बदलने की जरूरत नहीं है फ़ाइल)। इसके अलावा, आप अन्य स्टाइलशीट/शैली नियमों ऊपर शैलियों सम्मिलित कर सकते हैं और aplied शैली नियमों नीचे अन्य स्टाइलशीट में संशोधित किया जा सकता (जब आप इनलाइन शैलियों का उपयोग या जब किसी भी मौजूदा स्टाइलशीट नीचे सम्मिलित नियम रखने यह संभव नहीं है)।

यह फ़ंक्शन ओपेरा/फ़ायरफ़ॉक्स/आई 7/आईई 8/आईई 9/क्रोम/सफारी के साथ काम करता है (बिना किसी हैक के लागू!):

function addHtmlStyles(sCss, oBefore) 
    { 
    var oHead = document.getElementsByTagName('head')[0]; 
    if(!oHead || oHead == null) 
     { return false; } 

    var bResult = false, 
     oStyle = document.createElement('style'); 
    oStyle.type = 'text/css'; 
    oStyle.rel = 'stylesheet'; 
    oStyle.media = 'screen'; 

    if(typeof oStyle.styleSheet == 'object') 
     { // IE route (and opera) 
     try{ oStyle.styleSheet.cssText = sCss; bResult = true; } 
     catch(e) {} 
     } 
    else { 
      // Mozilla route 
      try{ oStyle.innerHTML = sCss; bResult = true; } 
      catch(e) {}; 
      if(!bResult) 
      { 
       // Webkit route 
       try{ oStyle.innerText = sCss; bResult = true; } 
       catch(e) {}; 
      } 
      } 

    if(bResult) 
    { 
     try 
     { 
     if(typeof oBefore == 'object') 
     { oHead.insertBefore(oStyle, oBefore); } 
     else { oHead.appendChild(oStyle); } 
     } 
     catch(e) { bResult = false; } 
    } 

return bResult; 
}

विफल होने पर ठीक या गलत होने पर यह सच हो जाता है। उदाहरण के लिए:

var sCss = '#tooltip {background:"#FF0000";}'; 

// get first stylesheet with jQuery, we don't use $('head') because it not always working 
// If there is no stylesheet available, it will be added at the end of the head tag. 
var oHead = $(document.getElementsByTagName('head')[0]), 
    oFirst = oHead.find('[rel=stylesheet]').get(0); 

if(addHtmlStyles(sCss, oFirst)) 
{ alert('OK'); } 
else { alert('NOT OK'); }

सब है कि। आशा है कि आप समाधान पसंद करेंगे। ग्रीटज़, इरविन हंटजेस

स्रोत

2010-10-14 20:32:59 Erwinus

प्रभावित करता है, मैं इसे उत्तर के रूप में देखकर काम नहीं कर सका, हालांकि मुझे अपने मूल कोड और आपके नए फ़ंक्शन में विलय करके काम करने का आधा तरीका मिल गया, निश्चित रूप से फ़ायरफ़ॉक्स में काम कर रहा था और ज्यादातर क्रोम में काम कर रहा था। – GlassGhost

अजीब यह क्रोम में काम नहीं कर रहा है, अब यह खुद को या कुछ अपडेट कर सकता है। – GlassGhost

ठीक है, जब मैंने इसका परीक्षण किया; यह क्रोम, या इंटरनेट एक्सप्लोरर के साथ काम नहीं किया। इसके अलावा मैंने आपके हेड फिक्स को कोड में जोड़ा है जो अब आईई 8 और इससे पहले सबकुछ के साथ काम करता है और आपके कोड से ज्यादा terse है। खेद है कि मैं इसे ऊपर उठाना भूल गया। यह थोड़ी देर के बाद से मैंने आपके कोड का परीक्षण किया है, यह अब क्रोम के साथ काम कर रहा है क्योंकि वे आकस्मिक रूप से अद्यतन कर रहे हैं। वर्तमान दर पर आधा बक्षीस ऐसा लगता है कि यह 3 अपवॉट्स वाले व्यक्ति के पास जाएगा, क्योंकि मुझे इस पृष्ठ पर IE8 और इससे पहले के साथ काम करने के लिए कोई कोड प्राप्त नहीं हो सकता है। मैं यह अनुत्तरित छोड़ रहा हूं, जब तक आईई 7 (और उम्मीद है कि आईई 6) काम पर नहीं किया जा सकता है। – GlassGhost

@ ग्लासगोस्ट: अजीब आपके लिए काम नहीं कर रहा है क्योंकि मैं इसे कई ब्राउज़रों (मोबाइल पर भी) में परीक्षण करता हूं। शायद यह सीएसएस जोड़ने के लिए DOM के तैयार होने में मदद करता है:

$(document).ready(function() 
{ 
    ....... 
});

इसके अलावा कभी कभी यह लोड हो रहा है स्क्रिप्ट के क्रम को बदलने के लिए मदद करता है।

Greetz, इरविन Haantjes

स्रोत

2011-01-06 09:40:21 Codebeat

आपने किस परीक्षण का परीक्षण किया? मेरे मामले में भी; एक विकिपीडिया शैली, स्क्रिप्ट लोड होने पर या स्क्रिप्ट लोड करने का क्रम जब मैं एक्सेस नहीं कर पा रहा हूं। – GlassGhost

मैं कई ब्राउज़रों में फ़ंक्शन 'addHtmlStyles' का परीक्षण करता हूं। मैं आपका प्रश्न समझ नहीं पा रहा हूं। एक विकिपीडिया शैली? पहुंच?ग्रीटज़ इरविन हंटजेस – Codebeat

इस दस्तावेज़ को किसी भी प्रकार की (जो मैं तुम्हें एक से अधिक दस्तावेज़ के साथ काम किया जाना चाहिए, या अन्यथा आप एक Doc पैरामीटर नहीं होगा मान) के साथ सभी मौजूदा ब्राउज़र पर मेरे लिए ठीक काम करता है :

function add_css_style(css_rules, document) { 
    document = document || self.document; 
    var style = document.createElementNS("http://www.w3.org/1999/xhtml", "style"); 
    style.type = "text/css"; 
    style.appendChild(document.createTextNode(css_rules)); 
    document.documentElement.appendChild(style); 
}

आप के बजाय CSSOM उपयोग करना चाहते हैं:

function add_css_style(css_rules, document) { 
    document = document || self.document; 
    var stylesheet = document.documentElement.appendChild(
     this.createElementNS("http://www.w3.org/1999/xhtml", "style") 
    ).sheet; 
    stylesheet.insertRule("@media all{" + rules + "}", 0); 
}

स्रोत

2011-04-30 02:05:38

आईई 8 (आईई 7, आईई 6 के साथ मेरे लिए काम नहीं किया है, मैंने जांच नहीं की लेकिन मुझे कुछ भी उम्मीद नहीं है) – GlassGhost

मैंने वर्तमान कहा। आईई 9 वर्तमान आईई है। –

नियंत्रित सीएसएस मोज़िला और क्रोम लेकिन नहीं IE

उत्तर

संबंधित मुद्दे