जावास्क्रिप्ट: क्या मैं गतिशील रूप से एक CSSStyleSheet ऑब्जेक्ट बना सकता हूं और इसे सम्मिलित कर सकता हूं?

Question

मुझे पता है document.styleSheets जिसमें एक पृष्ठ में सभी मान्य स्टाइल शीट शामिल हैं। मैं जानना चाहता हूं कि मैं एक नया बना सकता हूं और इसे जावास्क्रिप्ट के माध्यम से सूची में जोड़ सकता हूं।

मैं कोशिश की है document.styleSheets[0].constructor, document.styleSheets[0].__proto__.constructor, new CSSStyleSheet, CSSStyleSheet(), सभी मैं क्या क्रोम से प्राप्त TypeError: Illegal constructor है। CSSStyleSheet.constructor() ने एक शुद्ध वस्तु लौटा दी लेकिन मुझे एक सीएसएस स्टाइलशीट ऑब्जेक्ट की उम्मीद है।

मुझे पता है कि मैं एक लिंक/शैली तत्व बना सकता हूं और इसे जोड़ सकता हूं, फिर इसे संशोधित कर सकता हूं। मैं क्या जानना चाहता हूं कि, क्या मैं जावास्क्रिप्ट के साथ सीधे ऐसी वस्तु बना सकता हूं?

Answer 1

मुझे पता है, एकमात्र दृष्टिकोण जो आप पूछ रहे हैं उसके करीब आता है आईई-केवलdocument.createStyleSheet([url] [,index]) विधि जिसका उपयोग आप 31 ^*तक बनाने के लिए कर सकते हैंऑब्जेक्ट्स (जिसके बाद आपको अभी भी style तत्व मैन्युअल रूप से बनाने की आवश्यकता होगी और उन्हें document पर जोड़ दें)।

This answer आपको दिखाता है कि गैर IE ब्राउज़र के लिए createStyleSheet() विधि कैसे परिभाषित कर सकते हैं लेकिन आप इसे link/style तत्वों (जो किसी कारण से आप से बचने के लिए कोशिश कर रहे हैं) जोड़कर ऐसा नहीं करता है उम्मीद थी के रूप में।

---

^* IE 6 9 के लिए 31 आयातित स्टाइलशीट due to 5-bit field used for storing sheet IDs तक सीमित है। IE10 में इस सीमा 4095.

Answer 2

आप जावास्क्रिप्ट के अंदर सीएसएस लिखने की कोशिश कर रहे हैं, तो ऐसा करते हैं:

var s = document.createElement('style'); 
s.type = 'text/css'; 
s.innterText = 'body { background: #222; } /*... more css ..*/'; 
document.head.appendChild(s); 

यदि आप सर्वर से एक स्टाइलशीट लोड करने के लिए कोशिश कर रहे हैं जबकि: जहाँ तक

var s = document.createElement('link'); 
s.type = 'text/css'; 
s.rel = 'stylesheet'; 
s.href = '/url/to/css/file.css'; 
document.head.appendChild(s); 

Answer 3

कर दी गई है तो आप इस कोशिश की:

var myCSSStyleSheetIbj = Object.create(document.styleSheets[0]) 

यह मानते हुए कि document.styleSheets [0] एक CSSStyleSheet वस्तु, असल में अगर आप document.styleSheets की जगह है [0] किसी भी सीएसएस स्टाइलशीट के साथ यह काम करेगा।

Answer 4

हाँ, आप कर सकते हैं। document.styleSheets सीधे संशोधित नहीं किया जा सकता है, लेकिन आप अपने दस्तावेज़ में एक नई शैली टैग जोड़कर एक प्रविष्टि जोड़ सकते हैं:

// Create the style element 
var elem = $('<style id="lwuiStyle"></style>'); 
$('head').append(elem); 

// Find its CSSStyleSheet entry in document.styleSheets 
var sheet, 
    yourSheet = null; 
for (var sid in document.styleSheets) { 
    if (document.styleSheets.hasOwnProperty(sid)) { 
     sheet = document.styleSheets[sid]; 
     if (sheet.ownerNode == elem[0]) { 
      yourSheet = sheet; 
      break; 
     } 
    } 
} 

// Test it by changing the background colour 
yourSheet.insertRule('body {background-color: #fa0}', yourSheet.cssRules.length); 

आप Firefox चलाते हैं, तो आप सीधे इस स्क्रैचपैड में परीक्षण कर सकते हैं: कोड कॉपी करें, प्रेस Shift+F4, इसे पेस्ट करें, और Ctrl+L के साथ कोड चलाएं। मज़े करो!

Answer 5

Object.create(CSSStyleSheet.prototype)

तुम वापस CSSStyleSheet के एक खाली उदाहरण देता है। दूसरे शब्दों में, यह वही करता है जो आप new CSSStyleSheet करने की अपेक्षा करेंगे।

Object.create ईसीएमएस्क्रिप्ट 5 समर्थन वाले किसी भी ब्राउज़र में उपलब्ध है। एक संगतता तालिका here खोजें।

Answer 6

मुझे पता है कि आपने कहा था कि आप कोई तत्व नहीं बनाना चाहते थे, लेकिन यह वास्तव में ऐसा करने का एकमात्र तरीका है। कुछ लोगों के ऊपर इस दृष्टिकोण विस्तृत है, लेकिन मैं कोई भी नहीं बंद कवर कि HTMLStyleElement और HTMLLinkElement दोनों अपने CSSStyleSheet के लिए सीधी पहुँच पाने के लिए एक साफ sheet property है नोटिस:

var style = document.createElement("style"); 
document.head.appendChild(style); // must append before you can access sheet property 
var sheet = style.sheet; 

console.log(sheet instanceof CSSStyleSheet); 

के माध्यम से document.styleSheets