26. Il codice JavaScript dello style switcher
Il codice JavaScript dello style switcher è tratto dall'articolo presente all'indirizzo
http://www.alistapart.com/articles/alternate. La soluzione JavaScript
è da considerarsi come un ripiego se non si ha la possibilità di usare un più sicuro codice lato server, come
PHP (si veda in tal senso quanto scritto da Gianluca Troiani in CSS. Guida completa o si vada all'indirizzo
http://css-discuss.incutio.com/?page=StyleSwitching).
Nello specifico, il codice JavaScript compie le seguenti operazioni:
- individua ricorsivamente tutti gli elementi
link
presenti nel documento
- verifica che questi elementi siano dei fogli di stile e che abbiano un titolo
- verifica che i fogli di stile siano abilitati o meno
- disabilita lo stile corrente ed imposta lo stile alternativo, tramite un semplice costrutto
if
- crea un cookie per registrare la preferenza di stile scelta
- imposta la data di scadenza del cookie in modo che questa duri anche quando si chiude la sessione del browser, a meno che
l'utente non abbia impostato la rimozione totale dei cookie a fine sessione
- associa il cookie al cambio di stile.
Occorre quindi modificare la nostra marcatura come segue:
- <link rel="stylesheet" href="demo.css" type="text/css" media="screen" title="Normale" />
- <link rel="alternate stylesheet" href="alternate.css" type="text/css" media="screen" title="Accessibile" />
Nel corpo del documento apporteremo le seguenti modifiche:
- <p id="change-style">
- <a href="#" onclick="setActiveStyleSheet('Accessibile'); return false;">Layout accessibile</a>
- <a href="#" onclick="setActiveStyleSheet('Normale'); return false;">Normale</a>
- </p>
Alcuni autori associano anche il metodo location.reload()
al precedente codice. Se ne sconsiglia l'uso in quanto
aggiungerebbe un inutile refresh alla pagina.
Possiamo osservare i nostri progressi nel nostro documento XHTML e nel nostro
documento HTML.