La libreria jQuery è molto versatile. Tra le numerose funzionalità, si trova anche la possibilità di caricare un foglio di stile programmando ad esempio un pulsante o un link.
Basta abusare ancora una volta della funzione $ per aggiungere il riferimento al nuovo file CSS:
$("#change-css").click(function() { $("link[rel=stylesheet]").attr({href : "new.css"}); });
All'interno della pagina è quindi necessario inserire un elemento (ad esempio un link) con l'identificatore:
id="change-css"
Chiaramente, quando la pagina verrà ricaricata, il foglio di stile non verrà ricaricato. Per fare in modo che il browser ricordi il foglio di stile aggiuntivo, è necessario giocare un po' con i biscottini (cookie). Magari di questo ne parlerò la prossima volta.
Ho notato che usando questo sistema nel momento in cui viene switchato il css il browser visualizza la pagina senza css.
Si puà ovviare?
Si potrebbe generalizzare utilizzando elementi del tipo;
<a href="#" class="change-css" rel="style2.css" >Style 2</a><a href="#" class="change-css" rel="style3.css" >Style 3</a>
e riscrivere il codice così:
$(".change-css").click(function() { $("link[rel=stylesheet]").attr({href : this.rel});
});
In questo modo non c'è bisogno di incorporare i nomi dei css nel codice javascript e inoltre si possono avere più di un link (ad ognuno corrisponde uno stile diverso).
Certamente, è un ottimo metodo. Ad esempio se si usa un CMS si potrebbe sfruttare per generare e gestire l'elenco dei link ed i fogli di stile senza dover mettere mano al codice.