jQuery: ridimensionare i font

  • jQuery
  • Gabriele Romanato

Controllare la dimensione dei font con jQuery è senza dubbio una caratteristica che può aumentare l'accessibilità dei nostri siti. Non tutti gli utenti infatti hanno dimestichezza con le impostazioni e le opzioni del proprio browser, quindi fornire questa possibilità è sicuramente qualcosa che vale la pena approfondire. Vediamo insieme come ridimensionare i font con jQuery.

Innanzitutto creiamo due pulsanti HTML per aumentare o diminuire la dimensione dei font:


<div id="font-sizer">
    <a href="#" id="more">+</a>
    <a href="#" id="less">-</a>
</div>

Con jQuery dobbiamo associare due azioni distinte a ciascun pulsante:

  1. Incremento:
    • ottenere il valore intero della proprietà CSS font-size
    • incrementarlo
    • reimpostare la proprietà font-size sul nuovo valore
  2. Decremento:
    • ottenere il valore intero della proprietà CSS font-size
    • decrementarlo
    • reimpostare la proprietà font-size sul nuovo valore

Ecco il codice jQuery:


var FontResizer = function(element) {

    element = $(element);

    var more = $('#more'),
        less = $('#less');

    var increment = function() {
        var origSize = element.css('fontSize');
        var absSize = parseInt(origSize);
        absSize++;
        element.css('fontSize', absSize + 'px');
    }


    var decrement = function() {
        var origSize = element.css('fontSize');
        var absSize = parseInt(origSize);
        absSize--;
        element.css('fontSize', absSize + 'px');
    }


    this.resize = function() {

        more.click(function() {

            increment();

            return false;

        });

        less.click(function() {

            decrement();


            return false;


        });


    };

}

Ecco come funziona: parseInt() restituisce il valore intero da una stringa. Se il valore iniziale per la proprietà font-size è 16px, avremo 16. Questo numero verrà poi incrementato o decrementato usando gli operatori appositi di JavaScript.

Un esempio pratico:


var resizer = new FontResizer('#test');
resizer.resize();​

Potete visionare l'esempio finale in questa pagina.

Torna su