Aggiungere una regola CSS con Javascript

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:

var fogli = document.styleSheets;

alert("Numero dei file CSS: "+fogli.length);

var primo_css = document.styleSheets[0];

Vediamo quali sono le proprietà dell’oggetto:

console.log(document.styleSheets[0]);

/*

CSSStyleSheet
    cssRules: CSSRuleList
    disabled: false
    href: "https://devdev.it/style.css"
    media: MediaList
    ownerNode: link
    ownerRule: null
    parentStyleSheet: null
    rules: CSSRuleList
    title: null
    type: "text/css"
*/

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:

//Prendiamo il primo foglio
var foglio_css = document.styleSheets[0];

if (foglio_css) {
    foglio_css.insertRule("img { border: 1px solid #F00; opacity: 0.8; }");
}

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

foglio_css.insertRule("img { border: 1px solid #F00; opacity: 0.8; }", 5);

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:

var foglio_css = document.styleSheets[0];

if (foglio_css) {
    foglio_css.addRule("img", "border: 1px solid #F00; opacity: 0.8;");
}

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