Come aggiungere una regola CSS al DOM via Javascript

Friday, Nov 26, 2021| Tags: javascript, tricks, css, programmazione

Oggi ho avuto la necessità di intervenire via Javascript per aggiungere delle regole CSS dopo il caricamento di un documento. La soluzione è molto semplice:


var element = document.createElement('style'), //il nuovo elemento contenente le regole CSS da aggiunger
              sheet; //il foglio di stile che verrà aggiunto

//aggiungo l'elemento "style" nella sezione "head" del DOM
document.head.appendChild(element);

//prendo il riferimento al foglio di stile
sheet = element.sheet;

//aggiungo le regole che desidero
sheet.insertRule(`.awesome-class {
                     bottom: 4em!important;
                     color:red;
                   }`, 
                0);

fine.

SO WHAT DO YOU THINK?

Fancy a successful project? Result oriented, deep technical knowledge and business attitude. I can be the perfect man for you.

Contact me