Cambiare colore dello sfondo document bgcolor

Javascript oltre che essere un linguaggio per svolgere comuni problemi di programmazione, può interagire facilmente con la il documento html per modificarne lo stile, come cambiare colore dello sfondo document.bgcolor

Una delle prime cose che si cerca di imparare giocando con javascript è cambiare a nostro piacimento il colore della pagina.

Possiamo modificare il colore utilizzando la proprietà bgColor dell’oggetto nativo document:

1 document.bgColor = "#AAAFFF";

Possiamo cambiare il colore della pagine anche in conseguenza delle interazioni da parte dell’utente. Facciamo un esempio con dei radio button:

1 function changeColor( color ) {
2 
3 document.bgColor = color;
4 
5 }

Ed ecco il codice html per creare 3 radio button:

 1 <div>
 2 
 3 <input type="radio" name="colorSelector" value="yellow" onClick="changeColor( '#AF0001')" />
 4 
 5 <input type="radio" name="colorSelector" value="blue" onClick="changeColor( 'blue' )" />
 6 
 7 <input type="radio" name="colorSelector" value="green" onClick="changeColor( 'green' )" />
 8 
 9 </div>

Possiamo settare il colore dello sfondo utilizzando il corrispettivo valore espresso come sequenza esadecimale oppure utilizzando i nomi dei colori.

La funzione handler dell’evento click prende in input il parametro che rappresenta il colore e imposta lo sfondo del documento con il nuovo colore.