Modificare la dimensione dei caratteri al volo in Javascript

Autore: Luca Ruggiero | Tell a Friend Corso Java Impara a programmare col linguaggio OOP della Sun. Corso Javascript e DHTML Impara a creare controlli ed animazioni! Corso Web Design Disegno di siti Web con HTML, CSS e Dynamic HTML.

Modificare la dimensione dei caratteri di un testo è una utility interessante per gli utenti con difficoltà visive: lo scopo, quindi, è quello di consentire al lettore di ingrandire o rimpicciolire con un semplice click i caratteri del nostro sito, aumentandone usabilità ed accessibilità.

Utilizzeremo una semplice funzione Javascript per creare questo semplice ed utile effetto Dhtml, ma iniziamo dal foglio di stile. E' importante stabilire che per l'esempio utilizzeremo del testo di prova contenuto in una coppia di Tag <p> e </p> a cui assegneremo un ID per identificare quale livello deve essere preso in considerazione per la modifica del font-size.

Di seguito il Css:

<style type="text/css">
    p { font-family: Verdana; font-size: 10px; }
</style>

<p align="center">
    <a href="javascript:ImpostaFontSize(10)">10 pixel</a> ::
    <a href="javascript:ImpostaFontSize(12)">12 pixel</a> ::
    <a href="javascript:ImpostaFontSize(15)">15 pixel</a> ::
    <a href="javascript:ImpostaFontSize(20)">20 pixel</a>
</p>

<p align="center" id="LivelloModificabile">
    Inserire qui il testo che può cambiare di dimensione...
</p>

<script language="javascript">
 <!--
  function ImpostaFontSize(dimensione)
  {
      document.getElementById('LivelloModificabile').style.fontSize= dimensione;
  }
 //-->
</script>