Nello sviluppo di una Web application può essere utile o necessario modificare le regole di stile associate ad uno specifico elemento; naturalmente in questo caso la procedura più indicata dovrebbe essere quella di agire direttamente sui nomi delle classi e lasciare che sia CSS stesso a intervenire sulla formattazione delle componenti di pagina, ma vi sono alcune evenienze per le quali può essere più pratico ricorrere a JavaScript.
CSS injection con JavaScript
Un interessante esempio a riguardo potrebbe essere quello relativo all’esigenza di operare su una pseudoclasse, nel codice proposto di seguito verrà introdotto un possibile metodo per l’alterazione delle regole associate alla stilizzazione dei link e in particolare al selettore “:hover” della pseudoclasse “a”; si ipotizzi quindi che originariamente CSS preveda di associare a questo selettore il colore “giallo”, per modificare tale impostazione attraverso CSS injection si dovrebbe operare come segue partendo da un semplice link definito tramite markup:




<a href="#">Blah Blah</a>
<br /><br />
<button>Modifica colore</button>


Il CSS di partenza potrebbe quindi essere il seguente:



a { color: black; }
a:hover { color: yellow; }


Ora si potrà passare al codice necessario per effettuare l’injection tramite il button che, se clickato, determinerà la modifica del colore associate al selettore:









function modificaColore(reg) {
var div = $("<div />", {
html: '*<style>' + reg + '</style>'
}).appendTo("body");
}
$("button").on("click", function() {
modificaColore('a:hover { color: green; }');
});


Clickando sul button l’injection dovrebbe divenire operativa modificando la regola di stile associata al link.