[JS] Cambiare CSS in un attimo

Questo articolo è molto vecchio e potrebbe essere obsoleto

Oggi vediamo come cambiare il foglio di stile di una pagina con qualche riga di JavaScript. Una fuzione del genere può essere utile in tutti i casi in cui dobbiamo avere più versioni grafiche dello stesso sito, come ad esempio uno stile a più contrasto oppure uno stile dove cambiamo il colore dominante.

La pagina contenente più stili dovrà avere tutti i css dichiarati, ovviamente dando priorità al foglio di stile predefinito che il browser dovrà applicare al caricamento della pagina. Per far ciò basta impostare in modo specifico l'attributo rel del tag link usato per caricare i CSS.

Questo sarà il CSS predefinito:

<link rel="stylesheet" href="html/style.css" type="text/css" title="Stile Chiaro">

Mentre questo sarà il CSS alternativo:

<link rel="alternate stylesheet" href="html/style_dark.css" type="text/css" title="Stile Scuro">

A questo punto già con Firefox siamo in grado di cambiare lo stile della pagina tramite Visualizza > Stile pagina. Vediamo adesso come farlo da JavaScript.

Per accedere ai figli di stile basta un po' di conoscenza di DOM, infatti basta leggere e scrivere la proprietà styleSheets dell'oggetto document.

css = document.styleSheets;

Il contenuto della variabile css sarà un array con gli oggetti dei fogli di stile. L'elemento numero 0 sarà il primo CSS dichiarato, mentre l'elemento 1 sarà il secondo CSS. Agendo sulle proprietà enable e disabled dell'oggetto contenuto dell'array, sarà possibile attivare e disabilitare ogni stile permettendo di cambiare tra uno stile e l'altro.

Esempio

Una funzione applicativa potrebbe essere la seguente:

function styleChange(){

        var ss = document.styleSheets;



        if(ss[1].disabled){

                ss[1].disabled = false;

                ss[0].disabled = true;

        }

        else if(ss[0].disabled)

        {

                ss[1].disabled = true;

                ss[0].disabled = false;

        }

}

Questa funzione la possiamo richiamare facilmente con un pulsante.

<input type="button" value="Cambia stile" onclick="styleChange()" />

Articoli correlati

Abbonati al feed RSS. Se non sai cos'è guarda qui.

Abbonati alla newsletter per ricevere via email ogni nuovo articolo pubblicato. L'indirizzo verrà gestito da FeedBurner.

Dai il tuo parere, commenta questo articolo!
commenti su [JS] Cambiare CSS in un attimo
  1. angie scrive —

    Ottimo articolo .
    Se non volete usare javascript, , esiste un’alternativa in php , altrettanto efficace che fa uso dei cookie.
    Il tutorial in inglese si trova a questo indirizzo :
    http://www.alistapart.com/articles/phpswitch/
    Ciao.

  2. DnaX scrive —

    Beh, questo metodo è molto più veloce e permette di usarlo anche in assenza di programmazione lato server. Non capisco perché scomodare il PHP per una cosetta da niente. Inoltra per memorizzare la preferenza è possibile impostare un cookie anche da Javascript!

  3. Guido scrive —

    Ciao, a me nn va,
    Non cambia il foglio, la funzione dove va inserita?
    Grazie

Lascia un commento

CC BY-NC-SA 3.0 2004-2020 Daniele Napolitano — Per informazioni sulla licenza leggere le Note legali