सबसे पहले, मेरी खराब अंग्रेजी के लिए क्षमा करें, मुझे आशा है कि आप समझ गए होंगे कि मेरा क्या मतलब है।
मैं पूछना चाहता हूं कि ये style rule
क्यों मौजूद हैं जब स्टाइल टैग में कोई सामग्री नहीं थी, मुझे नहीं पता था कि यह क्या है। ये इंस्पेक्टर स्क्रीनशॉट TransferWise डैशबोर्ड पर कैप्चर किया गया था,
छवि 1.
छवि 1 पर (लाल) इसकी कक्षा .css-1r17gmu
है और नियम padding 24px, border-radius 0px, display flex, etc
है, लेकिन जब मैं शैली स्थान संदर्भ (नीला) पर क्लिक करता हूं, तो शैली टैग में कोई सामग्री नहीं थी। (छवि 2 - नीचे)
छवि 2.
मैं अपनी परियोजना में शैली की प्रतिलिपि बनाना चाहता हूं, लेकिन यह नहीं पता था कि यह कैसा है, और इसे कैसे बनाया जाए,
जब मैं Delete-Undo
स्टाइल टैग (छवि 2, नीली पृष्ठभूमि) की कोशिश करता हूं, तो टैग वही रहता है, लेकिन शैली चली जाती है।
यह मेरा प्रश्न है, मुझे नहीं पता कि इसमें कोई डुप्लिकेट है क्योंकि मुझे कीवर्ड नहीं पता है।
1 उत्तर
यह प्रभाव .insertRule
, जिसके परिणामस्वरूप टैग पर नियम DOM में तत्वों पर लागू होता है, लेकिन
< में HTML मार्कअप डाले बिना शैली> कोड> टैग। आप इसे उस साइट पर इंस्पेक्टर में स्टाइल टैग चुनकर और फिर कंसोल में
console.dir($0.sheet.cssRules)
करके देख सकते हैं:
यदि आप वहां निहित शैली की प्रतिलिपि बनाना चाहते हैं, तो आपको .cssRules
पर पुनरावृति करनी होगी।
इस व्यवहार का जीवंत उदाहरण:
document.querySelector('#theStyle').sheet.insertRule('.foo { background-color: yellow; }');
// Text content is still empty:
console.log(document.querySelector('#theStyle').textContent);
<style id="theStyle"></style>
<div class="foo">foo</div>
.insertRule
का उपयोग करके सभी स्टाइल नियम छुपा सकते हैं, या इसका साइड इफेक्ट धीमा उपयोगकर्ता पेंट समय धीमा कर रहा है?
<style>
टैग हैंstyle[data-emotion=css]
में कोई सामग्री नहीं थी।