मैं जावास्क्रिप्ट का उपयोग करके एक सीएसएस स्टाइलशीट नियम गतिशील रूप से जोड़ने की कोशिश कर रहा हूं, उदाहरण के लिए 2 here।दस्तावेज़ में स्टाइलशीट कब जोड़ा गया है। स्टाइलशीट
यह समय के सबसे अधिक काम करता है, लेकिन वहाँ एक दौड़ हालत उस में (कम से कम) क्रोम (15.0.874 और 17.0.933) कभी कभी असफल करता है कि हो रहा है। कैश खाली होने पर यह अक्सर होता है (या साफ़ कर दिया गया है)।
यहाँ है कि मैं क्या करने के लिए उसे संक्षिप्त कर लिया है। सबसे पहले मैं इसे <head> पर जोड़कर बाहरी स्टाइलशीट लोड करता हूं और फिर मैं एक नई स्टाइलशीट बनाता हूं (जहां मैं नियम जोड़ूंगा)। मैं फिर document.styleSheets (तुरंत और 1 सेकंड के बाद) की लंबाई मुद्रित करता हूं।
$(function() {
// it doesn't happen if this line is missing.
$("head").append('<link rel="stylesheet" type="text/css"'+
'href="/css/normalize.css" />');
var stylesheet = document.createElement("style");
stylesheet.setAttribute("type", "text/css");
document.getElementsByTagName('head')[0].appendChild(stylesheet);
var b = $('body');
b.append(document.styleSheets.length).append('<br/>');
setTimeout(function() {
b.append(document.styleSheets.length).append('<br/>');
}, 1000);
});
(http://jsfiddle.net/amirshim/gAYzY/13/ पर इसके साथ खेलते हैं)
जब कैश स्पष्ट है, यह कभी कभी प्रिंट 2 तो 4, यह अर्थ शैली दोनों में से किसी को नहीं जोड़ता है (jsfiddle यह खुद 2 सीएसएस फ़ाइलों है कहते हैं) चादरें document.styleSheets पर तुरंत ... लेकिन शायद बाहरी फ़ाइल को लोड करने की प्रतीक्षा कर रही है।
क्या यह उम्मीद है?
यदि हां, तो Example 2 on MDN (और कई अन्य वहाँ बाहर) है टूट? रेखा 27 के बाद से:
var s = document.styleSheets[document.styleSheets.length - 1];
साथ document.styleSheets.length == 0
नोट का मूल्यांकन हो सकता है कि ऐसा नहीं होता है जब मैं बाह्य CSS फ़ाइल के पहले लोड न करें।
मैं आपसे पूछना चाहता हूं कि आपका वांछित अंत परिणाम क्या है। किस परिस्थिति में आप एक सीएसएस फ़ाइल में एक नियम को 'इंजेक्ट' करना चाहते हैं, बस इसे सीएसएस फ़ाइल के अंदर पहली जगह लिखा है? – Sotkra
मैं भी ... लेकिन केवल $ (दस्तावेज़) के बाद गतिशील स्टाइलशीट जोड़ रहा .ready निकाल दिया गया है ... –
@Kees: कोड मैं दे दी है में '$ (दस्तावेज़) .ready' सब कुछ कर रही है। यही है '$ (फ़ंक्शन() {...});' करता है। – Amir