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:

  1. individua ricorsivamente tutti gli elementi link presenti nel documento
  2. verifica che questi elementi siano dei fogli di stile e che abbiano un titolo
  3. verifica che i fogli di stile siano abilitati o meno
  4. disabilita lo stile corrente ed imposta lo stile alternativo, tramite un semplice costrutto if
  5. crea un cookie per registrare la preferenza di stile scelta
  6. 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
  7. associa il cookie al cambio di stile.

Occorre quindi modificare la nostra marcatura come segue:

  1. <link rel="stylesheet" href="demo.css" type="text/css" media="screen" title="Normale" />
  2. <link rel="alternate stylesheet" href="alternate.css" type="text/css" media="screen" title="Accessibile" />

Nel corpo del documento apporteremo le seguenti modifiche:

  1. <p id="change-style">
  2. <a href="#" onclick="setActiveStyleSheet('Accessibile'); return false;">Layout accessibile</a>
  3. <a href="#" onclick="setActiveStyleSheet('Normale'); return false;">Normale</a>
  4. </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.