Aggiungere una regola CSS in modo dinamico con Javascript può esserci utile in vari casi: uno riguarda sicuramente le performance, permettendoci di aggiungere e rimuovere regole direttamente al foglio di stile; un altro caso potrebbe essere semplicemente quelli di fare del traversing, cioè di manipolare degli elementi per fargli avere certe caratteristiche.

Partiamo dalle basi: per accedere ai fogli di stile CSS, dobbiamo utilizzare l’oggetto document.styleSheets:

Vediamo quali sono le proprietà dell’oggetto:

Aggiungiamo delle regole

Per aggiungere delle regole, utilizzeremo il metodo insertRule, passandogli l’intera regola CSS, proprio come faremmo in un comune foglio di stile:

Questo metodo accetta un secondo parametro non obbligatorio, l’indice, cioè la posizione alla quale la regola verrà aggiunta, di default è , che corrisponde alla cima del foglio di stile.

Questo metodo, purtroppo, non è compatibile con le vecchie versioni di Internet Explorer. Se la compatibilità per noi è un problema, possiamo utilizzare un metodo maggiormente compatibile,  addRule, che ha una sintassi leggermente diversa:

Questo metodo è più largamente compatibile ed è quindi consigliabile in certi contesti. I parametri sono, principalmente, due: l’elemento e le regole CSS da applicare.