Ingrandire dinamicamente il testo con AJAX

Questa sera ho avuto bisogno di uno script che mi aiutasse a ridimensionare dinamicamnte il testo contenuto in una pagina html, non volevo creare qualcosa di pesante e che rendesse la pagina troppo pesante, ma grazie ad AJAX ci sono riuscito. Vediamo ora come fare:

1. Creiamo uno script contenente le funzioni che agiscono sul DOM:

<script type="text/javascript">//<![CDATA[
//funzione che diminuisce la dimensione del testo
function piccolo(){
document.body.style.fontSize = "1em";
}
//funzione che riporta alle dimensione di default del testo
function normale (){
document.body.style.fontSize = "0.5em";
}
//funzione che ingrandisce la dimensione del testo
function grande(){
document.body.style.fontSize = "1.5em";
}//]]>
</script>

NOTA: Vi ricordo di settare la dimensione normale del testo uguale a quella che avete nel foglio di stile, i valori possono essere espressi in em, px, pt.

Fatto questo non vi resta che inserire nel body i link (vuoti) per poter chiamare le funzioni:

<a onclick="grande();" href="#" title="Ingrandisci il testo"> A+ </a>|
<a onclick=normale(); href="#" title="Testo normale"> A </a>|
<a onclick=piccolo(); href="#" title="Diminuisci il testo"> A- </a>

Questo é tutto, ora siete liberi di modificarlo come meglio credete magari inserendo delle immagini al posto del testo. Buon lavoro…