Javascript: posso creare dinamicamente un oggetto CSSStyleSheet e inserirlo?

Question

Conosco document.styleSheets che consiste di tutti i fogli di stile validi in una pagina. Voglio sapere se posso crearne uno nuovo e aggiungerlo alla lista dei presenti tramite javascript.

ho cercato document.styleSheets[0].constructor, document.styleSheets[0].__proto__.constructor, new CSSStyleSheet, CSSStyleSheet(), tutto ciò che ho da Chrome è TypeError: Illegal constructor. CSSStyleSheet.constructor() ha restituito un oggetto puro ma mi aspetto un oggetto CSSStyleSheet.

So che posso creare un collegamento/elemento di stile e aggiungerlo, quindi modificarlo. Quello che voglio sapere è che posso creare tale oggetto direttamente con javascript?

Answer 1

Per quanto riguarda Lo so, l'unico approccio che si avvicina a quello che stai chiedendo è il IE-onlydocument.createStyleSheet([url] [,index]) metodo che è possibile utilizzare per creare fino a 31 ^*Oggetti(dopo di che dovrai ancora creare manualmente gli elementi style e aggiungerli a document).

This answer mostra come si può definire il metodo createStyleSheet() per i browser diversi da IE, ma come ci si aspetterebbe lo fa aggiungendo link/style elementi (che per qualche motivo si sta cercando di evitare).

---

^* IE 6 a 9 è limitato a 31 fogli di stile importati due to 5-bit field used for storing sheet IDs. In IE10 questo limite è stato portato a 4095.

Answer 2

Se si sta tentando di scrivere il CSS all'interno di javascript, fare questo:

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

Mentre se si sta cercando di caricare un foglio di stile dal server:

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

Hai provato questo:

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

Supponendo che document.styleSheets [0] è un oggetto CSSStyleSheet, In realtà se si sostituisce document.styleSheets [0] con qualsiasi CSSStyleSheet avrebbe funzionato.

Answer 4

Sì, è possibile. Il document.styleSheets non possono essere modificati direttamente, ma è possibile aggiungere una voce con l'aggiunta di un nuovo tag di stile al documento:

// 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); 

Se si esegue Firefox, è possibile verificare direttamente questo in Scratchpad: Copiare il codice, premere Shift+F4, incollalo ed esegui il codice con Ctrl+L. Divertiti!

Answer 5

Object.create(CSSStyleSheet.prototype)

ti restituisce un'istanza vuota di CSSStyleSheet. In altre parole, fa esattamente quello che ti aspetteresti da fare new CSSStyleSheet.

Object.create è disponibile in qualsiasi browser con supporto ECMAScript 5. Trova una tabella di compatibilità here.

Answer 6

So che hai detto che non volevi creare un elemento, ma questo è davvero l'unico modo per farlo. Alcune persone hanno descritto questo approccio sopra, ma ho notato nessuno coperto off che HTMLStyleElement e HTMLLinkElement entrambi hanno un modo accurato sheet property per ottenere l'accesso diretto alla loro CSSStyleSheet:

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); 

molto più semplice di ricerca attraverso document.styleSheets