Corsi on-line

CSS injection con JavaScript

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

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: '&shy;<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.

Per approfondire.

Post correlati
I più letti del mese
Tematiche