Modificare la dimensione dei caratteri al volo in Javascript

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

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>
Lo scopo è semplicemente quello di definire, per chiarezza, un punto di partenza su cui basare il resto dello script.
Di seguito riporto il codice Html per la scelta del font-size desiderato (espresso in pixel) con riferimento alla funzione ImpostaFontSize() che analizzeremo in seguito:
<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>
Analizziamo brevemente i due passi evidenziati in rosso; la funzione riporta tra parentesi un parametro che identifica il numero in pixel che deve essere assegnato al testo; LivelloModificabile è l'ID del testo a cui farà riferimento la funzione di modifica delle dimensioni del carattere.

Di seguito la funzione Javascript:
<script language="javascript">
 <!--
  function ImpostaFontSize(dimensione)
  {
      document.getElementById('LivelloModificabile').style.fontSize= dimensione;
  }
 //-->
</script>
La varabile parametrica dimensione serve a standardizzare la funzione in base al font-size impostato al momento del click sulle opzioni scelte.

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (106.555)

:: Breve guida a jQuery (96.818)

:: Le espressioni regolari in Javascript (84.690)

:: Gestione delle stringhe in Javascript (74.154)

:: Stampare una pagina col Dhtml (42.639)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (39.785)

:: Menu orizzontale dinamico in Dhtml (36.961)

:: Gli Array in Javascript (35.690)

:: Temporizzazioni Javascript (31.211)

:: Istruzion condizionali in Javascript: if e switch (28.629)

IN EVIDENZA
DOWNLOAD