क्या HTMLStyleElement (document.createElement('style')) से CSSStyleSheet ऑब्जेक्ट (document.styleSheets[0]) प्राप्त करना संभव है?एक HTMLStyleElement तत्व से एक CSSStyleSheet ऑब्जेक्ट कैसे प्राप्त करें
मैं गतिशील रूप से एक सम्मिलित-इन-द-दस्तावेज़ में सीएसएस नियमों को जोड़ना चाहता हूं-अभी तक <style> तत्व।
दस्तावेज़ में शैली तत्व जोड़ने से पहले नियम जोड़ सकते हैं।
पुराने आईई ब्राउज़रों notes- एक जोड़े को एक शैली तत्व के लिए बच्चे नोड्स नहीं जोड़ है, तो उनके लिए तत्व के styleSheet.csstext संपत्ति के लिए प्रदान कर सकते हैं। सुनिश्चित करें कि आप दस्तावेज़ के शीर्ष पर नया तत्व जोड़ दें। इसके बाद यहां
document.head.appendChild(document.createElement("style")).setAttribute("type", "text/css");
var mycss = document.styleSheets[document.styleSheets.length-1];
है:
function addStyle(css, media1, title1){
var el= document.createElement('style');
el.type= 'text/css';
if(media1) el.media= media1;
if(title1) el.title= title1;
if(el.styleSheet) el.styleSheet.cssText= css;//IE
else{
el.appendChild(document.createTextNode(css));
}
//return el without the next line if you want to append it later
return document.getElementsByTagName('head')[0].appendChild(el);
}
var cs1= [
'#yw_psq, #yw_psq h2{background-color: green; color: white;}',
'#yw_psq_div{margin: 1ex; position: relative; text-align: center;}',
'#ps_counter{color: white; margin: 1ex 0 0 0; text-align: center;}',
'#pzsq_grid button{cursor: pointer; font-size: 1.2em; width: 100%;}',
'#delaySpan{font-weight: bold; margin-left: 1em;}'
]
addStyle(cs1.join('\n'),'screen','yw_psq');
'document.createElement (" style ") 'एक्सएचटीएमएल 5 दस्तावेजों में काम नहीं करेगा क्योंकि यह नामस्थान के साथ एक तत्व बनाएगा, जिसका अर्थ है कि तत्व केवल एचटीएमएलमेंट इंटरफ़ेस से अपनी गुणों का उत्तराधिकारी होगा, और इस प्रकार यह मूल रूप से एक खाली तत्व होगा कोई विशेष गुण के साथ। इस समस्या को ठीक करने के लिए, आपको XHTML5 दस्तावेज़ों में काम करने के लिए 'document.createElementNS (" http://www.w3.org/1999/xhtml "," style ") का उपयोग करना होगा। –
यदि आपके पास तत्व को सम्मिलित करने के लिए उपयोग की पहुंच है, तो आप किसी भी अन्य तत्व की तरह स्टाइल जानकारी जोड़ सकते हैं। एक बार तत्व डालने के बाद, ब्राउज़र पृष्ठ को फिर से प्रवाह करेगा और लागू होने वाले किसी भी प्रासंगिक सीएसएस नियमों पर उठाएगा। तत्व को स्टाइल करने के लिए आपको स्टाइलशीट तक पहुंच की आवश्यकता नहीं है, आपको केवल तत्व तक पहुंच की आवश्यकता है।
यहाँ कैसे मैं आमतौर पर मेरी जावास्क्रिप्ट MITH है एक नई शैली पत्र बनाने के लिए और उसके CSSStyleSheet वस्तु mycss प्राप्त करने के लिए (के बजाय HTMLStyleElementappendChild द्वारा दिया) है मैं इसे स्टाइल नियम कैसे जोड़ता हूं:
mycss.insertRule("css, selectors { cool: styles; and: stuff; }", mycss.cssRules.length);
आशा है कि इससे मदद मिलती है।
यह <style> तत्व से एक CSSStyleSheet ऑब्जेक्ट प्राप्त करने के लिए संभव है।
var style = document.createElement('style');
document.head.appendChild(style);
var styleSheet = style.sheet // Will give you the associated CSSStyleSheet
यह केवल के बाद <style> तत्व दस्तावेज़ जोड़ा जा चुका है काम करेंगे।
कंसोल में चारों ओर पोक करके असाधारण रूप से अच्छी तरह से प्रलेखित और खोजने में बहुत मुश्किल नहीं है।
मुझे लगता है कि आप प्राथमिक दस्तावेज को पहले एक और बनाकर आवेदन कर सकते हैं: 'var newDoc = document.implementation.createHTMLDocument(); newDoc.head.appendChild (myStyleElement) '।एफएफ में, यह स्पष्ट रूप से पर्याप्त है कि 'newDoc.styleSheets [0] .cssRules' प्राप्त करें, लेकिन क्रोम अपरिभाषित लौट रहा था, इसलिए मुझे अपने स्टाइल एलीमेंट को तत्व के रूप में प्राप्त करना पड़ा, फिर मैं '.sheet.cssRules' पर काम कर सकता था। (अन्य ब्राउज़रों को नहीं देखा है, क्योंकि मेरी परियोजना सिर्फ एक उपयोगकर्ता है।) लेकिन हाँ, पागल मैं इस '.sheet' संपत्ति के बारे में कितना छोटा पा सकता हूं। –
यहाँ आप इस सवाल का जवाब है: [http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript][1] [ 1]: http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript – netadictos
धन्यवाद netadictos, लेकिन विषय थोड़ा अलग है –
मुझे लगता है कि आप दस्तावेज़ को क्लोन कर सकते हैं क्लोन से शैली-चादरें और नया जोड़ें और ऑब्जेक्ट प्राप्त करें और दस्तावेज़ क्लोन को फिर से हटा दें। – noob