Cambiare colore di sfondo e dimensione font ad una pagina 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.

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