Come aggiungere tag style css con javascript

In questa mini-guida javascript vediamo come “innestare” un tag contenente stile css all’interno di un documento in modo asincrono.

In questo semplice codice/snippet javascript andremo ad aggiungere in modo asincrono del codice di stile racchiuso con tag “style” all’interno dell’head di una pagina.

var css = 'h1 { background: red; }',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet){
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

head.appendChild(style);

Come vedete il codice è piuttosto semplice:

Per prima cosa definisco lo stile da aggiungere associandolo a una variabile (mi raccomando che sia inline!), creo anche due altre variabili chiamate “head” e “style“. In head associo e identifico il tag di apertura dell’head di pagina dove innestare il codice. Con la variaible “style” invece creo  effettivamente il tag html

var css = 'h1 { background: red; }',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

La seconda porzione di codice invece appende il codice css all’interno del tag appena creato.

Image credits js disponibile su Shutterstock