Personalizzare colore di sfondo e font con javascript

Nell'articolo odierno vedremo come fare per cambiare le due impostazioni contemporaneamente.

Cominciamo a vedere la pagina finale di esempio. Per ogni colore di sfondo scelto ho abbinato un colore di font in contrasto, in modo tale da non avere problemi nella lettura; ovvio che si può intervenire sia sull' uno che sull' altro. Premetto che l' impostazione della pagina è sempre uguale; una gabbia in alto contenente i link dai quali scegliere le diverse opzioni. Al centro della pagina un box in cui è presente il testo da leggere. Vediamo il codice utilizzato:

<div id="tool">
 Cambia il colore di sfondo ed il colore del font:
 <a href="#" onclick="document.getElementById('box').style.fontSize='14px';
 document.getElementById('box').style.backgroundColor='#fff';
 document.getElementById('box').style.color='#000';
 document.getElementById('box').style.fontWeight='bold';
 return false;">Default</a>
 |
 <a href="#" onclick="document.getElementById('box').style.backgroundColor='#000000';  
 document.getElementById('box').style.color='#ffffff';
 document.getElementById('box').style.fontWeight='bold';
 document.getElementById('box').style.fontSize='14px';
 return false;">Sfondo Nero</a>
|
  <a href="#" onclick="document.getElementById('box').style.fontSize='14px';  
document.getElementById('box').style.backgroundColor='#cfe7e7';
 document.getElementById('box').style.color='#333';
 document.getElementById('box').style.fontWeight='bold';
 return false;">Sfondo Celeste</a>
 |
 <a href="#" onclick="document.getElementById('box').style.fontSize='14px';  
 document.getElementById('box').style.backgroundColor='#73848c';  
 document.getElementById('box').style.color='#fff';
 document.getElementById('box').style.fontWeight='bold';
 return false;">Sfondo Grigio</a>
 </div> 

A differenza degli altri 2 articoli il codice è aumentato; in effetti non potrebbe essere diversamente in quanto si devono descrivere tutte le proprietà che vogliamo cambire quando andiamo a fare una scelta dai link. La prima cosa molto importante da dire è quella che si deve fare riferimento alla gabbia, che io ho nominato box, contenente il testo; la seconda è che otteniamo quello che abbiamo visto nel file di esempio grazie al DOM. Il rigo:

<a href="#" onclick="document.getElementById('box')  

si riferisce all' ID univoco della gabbia con il testo, che io ho chiamato, appunto, box. In effetti il mio div id="box" sta ad indicare che mi riferisco in maniera univoca solo e soltanto a "quel" box.

document.getElementById('box').style.backgroundColor='#fff'; 

non fa altro che settare il colore di sfondo, bianco in questo caso.

document.getElementById('box').style.color='#000'; 

con questo codice vado a scegliere il colore del testo.

document.getElementById('box').style.fontWeight='bold'; 

stabilisce che il font deve essere in grassetto.
Queste sono le 4 proprietà che ci fanno ottenere il risultato. Chiaramente vanno ripetute per quante opzioni vogliamo dare all' utente che entra nel sito.