Cambiare la dimensione del font con javascript

Potrebbe essere motivo di un altro tutorial, però oggi ci occuperemo di come fare per modificare la dimensione del font. Anche in questo caso saremo noi a "guidare" l' utente attraverso delle scelte che offriremo. Così come nello scorso articolo, anche in questo ci avvarremo del DOM; in pratica accederemo alle proprietà del font, più precisamente del font contenuto in un box al quale noi forniremo più di una dimensione per poter far in modo che l' utente scelga quella che più gli fa comodo.

Questa proprietà di cambiare la misura del font, strizza un pò l'occhio all' accessibilità dei siti e che, spero presto, venga adottata da tutti coloro i quali costruiscano siti web. Ma adesso passiamo a vedere il risultato finale e poi facciamo un passo indietro per la spiegazione del codice. La pagina è la stessa dell'esempio precedente, solo che sono cambiate le modalità di "accesso" ad alcuni suoi elementi; in particolare abbiamo:

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

il quale rappresenta la nostra ipotetica barra delle utilità dalla quale settare la dimensione del font; e poi abbiamo il div #box il cui codice è il seguente:

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

In questa gabbia noi possiamo inserire tutto il testo che vogliamo ma, come avete visto dall' esempio, abbiamo la facoltà di scegliere la misura. Il codice che ci permette di fare questo è:

<a href="#" onclick="document.getElementById('box').style.fontSize='12px';return  false;">Default</a>

<a href="#" onclick="document.getElementById('box').style.fontSize='14px'; return false;">14px</a>

e così via....
Cosa è cambiato dal codice precedente? Siccome agivamo a livello di pagina del documento, avevamo messo nel tag <body> un id="pagina", ricordate? In effetti vaniva cambiato solo il colore di background alla pagina, non ad un box particolare; adesso, invece, individuato l' elemento a cui applicare più di un parametro, le cose cambiano, non di molto però. Si deve spostare l' "obiettivo" sull'elemento box, quello che contiene il testo, quindi, ecco perchè ho scritto:
document.getElementById('box').style.fontSize.

La gabbia ha già un suo ID in quanto non potrebbe essercene un' altra con lo stesso nome nella pagina, in più vado a prendere proprio "quella" indicandola nel codice DOM che ci mette a disposizione il W3C. Una ultima cosa: nel codice CSS ho settato come font-size 12 pixel, cioè il mio valore predefinito. Ecco perchè quando si clicca su "Default" la pagina assume quella grandezza. Ovviamente ci si puè divertire come si vuole a cambiare le dimensioni che vogliamo; possiamo usare gli "em", i "pt" oppure un valore in "%" (percentuale).
A voi la scelta.

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