jQuery ci da un controllo totale su tutti gli aspetti relativi al DOM e alla sua manipolazione. In questo articolo vedremo un modo semplicissimo per modificare gli stili predefiniti della nostra pagina usando un foglio di stile alternativo.
La tecnica di base è la seguente:
$('link[media=screen]').attr('href', 'alternate.css');
Associando questa azione ad un elemento a, possiamo cambiare l'intero layout con un solo clic. Il problema è che i cambiamenti non sono memorizzati. Occorre quindi associare la scelta ad un cookie utilizzando il plugin jQuery Cookie:
$('#switcher').click(function(event) {
$('link[media=screen]').attr('href', 'alternate.css');
$.cookie('style', 'alternate.css', {expires: 1});
event.preventDefault();
});
Registrato il foglio di stile nel cookie, questa è la verifica da fare per impostare lo stile scelto nelle nostre pagine:
var style = $.cookie('style');
if(style !== null) {
$('link[media=screen]').attr('href', style);
}