Cambiare colore di background della pagina con javascript

Nel titolo ho scritto, infatti, che potremmo, attraverso un link, decidere di cambiare il colore di sfondo. Premessa: questo è possibile attraverso pochissimo codice DOM del W3C. Non è questo l'articolo in cui verrà spiegato il linguaggio, lo faremo più avanti; adesso soffermiamoci a vedere il risultato finale e ad analizzare il codice. Questo è il file di esempio. Chiaramente il tutto è stato anche "mescolato" con i Fogli di Stile. Ho voluto creare, nel file appena visto, una barra nella quale ci sono i "comandi" per dare un colore di background diverso a seconda del nome ed il suo codice è:

div#tool{
margin:10px auto;
padding:10px;
width:90%;
border:1px solid #666;
text-align:left;
background-color:#e4e4e4;
font-size:10px;
}

al di sotto di essa c' è il contenuto vero e proprio della pagina, che potrebbe essere sostituito da una qualsiasi altra pagina del nostro sito; il codice è:

div#box{
margin:10px auto;
padding:10px;
width:90%;
border:1px solid #666;
text-align:left;
background-color:#e4e4e4;
}

Bene: non mi pare ci sia da spiegare qualcosa in merito al CSS inserito; ho voluto riportarlo per dare una "ripassatina" al codice ed agli elementi che si possono ottenere con i Fogli di Stile.

Adesso viene la parte che ci interessa: come è possibile "comandare" attraverso un link il cambio di colore? grazie all'oggetto (metodo) getElementByID definito dal W3C. Questo metodo permette di recuperare l' elemento caratterizzato dal valore (unico) del proprio attributo ID; in altri termini restituisce un riferimento all' elemento in questione.

N.B: abbiamo parlato di riferimento ad un elemento unico, caratterizzato da un ID; bene, il nostro elemento a cui fare riferimento è la nostra pagina, di conseguenza si deve inserire nel tag <body> un ID unico, cioè: <body id="pagina">.

Adesso nei nostri link non dobbiamo fare altro che "richiamare" l'oggetto pagina attraverso il metodo più su esposto (getElementByID), in questo modo:

<a href="#" onclick="document.getElementById('pagina').style.backgroundColor='#ffffff'; return false;">Default</a> 

Sostituendo i colori esadecimali, abbiamo tutti i colori disponibili per lo sfondo della nostra pagina web.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati