Come usare CSSStyleSheet.insertRule() correttamente?

Non riesco a capire dove sto andando male qui: /. Quando eseguo questo codice, tutto ciò che ottengo è un elemento vuoto. Non riesco a ottenere il metodo insertRule per fare nulla (nemmeno produrre un errore). Mi sto perdendo qualcosa?Come usare CSSStyleSheet.insertRule() correttamente?

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
</head> 
<body> 
<script> 
    var sheet = (function() { 
     // Create the <style> tag 
     var style = document.createElement("style"); 

     // WebKit hack 
     style.appendChild(document.createTextNode("")); 

     // Add the <style> element to the page 
     document.head.appendChild(style); 

     return style.sheet; 
    })(); 
    sheet.insertRule("\ 
     #gridContainer {\ 
      width: 100%;\ 
      height: 100%;\ 
     }\ 
    ", 0); 
</script> 
</body> 
</html>

fonte

2015-03-08 klinore

Sembra funzionare su Firefox e Chromium. – Oriol

Sto ottenendo un vuoto in Firefox e Chromium ... Ho modificato la mia domanda per mostrare l'intero codice che sto utilizzando. Non sei sicuro di cosa stia andando male ... – klinore

E 'un po' confusa, ma il codice fa in realtà il lavoro, è solo che non si può vedere le regole inserite nella struttura XML restituito.

Per verificare che il codice funziona, ci sono due test si può fare:

var style = (function() { 
 
    // Create the <style> tag 
 
    var style = document.createElement("style"); 
 

 
    // WebKit hack 
 
    style.appendChild(document.createTextNode("")); 
 

 
    // Add the <style> element to the page 
 
    document.head.appendChild(style); 
 
    
 
    console.log(style.sheet.cssRules); // length is 0, and no rules 
 

 
    return style; 
 
})(); 
 
style.sheet.insertRule('.foo{color:red;}', 0); 
 
console.log(style.sheet.cssRules); // length is 1, rule added

<p class="foo"> 
 
    I am some text 
 
</p>

Eseguire il frammento di codice, e si può vedere che la regola CSS si applica. E la proprietà cssRules cambia anche nella console.

Questo spesso si fa notare quando le estensioni del browser generano fogli di stile personalizzati aggiunti al DOM, mentre durante il debug appaiono come fogli di stile vuoti nell'ispettore.

fonte

2015-03-08 19:36:32

Ha! Avrei dovuto pensarci per testarlo. Dato che appariva vuoto nell'ispettore, ho fatto l'ipotesi che non fosse applicato. Grazie Awal :) – klinore

@ user2522373 nessun problema :) La prossima volta, ricorda che la console è un testimone silenzioso di tutto. –

Strano che il testo non compaia all'interno dell'elemento, come ci si potrebbe aspettare. Anche se sto vedendo che funziona indipendentemente nei miei casi d'uso. – trusktr

Questa versione è basata sulla risposta di Awal e su Totally Pwn CSS con Javascript da web archive. Il parametro id è utile per accedere allo styleSheet con getElementById e il parametro media è opzionale e passa a "schermo". Sto restituendo lo styleSheet.sheet, questa è solo la mia preferenza.

function createStyleSheet (id, media) { 
    var el = document.createElement('style'); 
    // WebKit hack 
    el.appendChild(document.createTextNode('')); 
    el.type = 'text/css'; 
    el.rel = 'stylesheet'; 
    el.media = media || 'screen'; 
    el.id = id; 
    document.head.appendChild(el); 
    return el.sheet; 
}

fonte

2016-04-22 19:38:45

Come usare CSSStyleSheet.insertRule() correttamente?

risposta

Problemi correlati