Sono dell'idea che i siti web che usano una dimensione dei font ridotta dovrebbero fornire agli utenti una funzionalità per permettere loro di gestire la dimensione dei font. jQuery è lo strumento più adatto per questo scopo.
Possiamo definire un plugin che accetta come opzioni i riferimenti ai bottoni per aumentare o diminuire la dimensione dei font:
(function($) {
$.fn.fontResize = function(options) {
var settings = {
increaseBtn: $('#increase-font'),
decreaseBtn: $('#decrease-font')
};
options = $.extend(settings, options);
return this.each(function() {
var element = $(this);
options.increaseBtn.on('click', function(e) {
e.preventDefault();
var baseFontSize = parseInt(element.css('font-size'));
element.css('font-size', (baseFontSize + 1) + 'px');
});
options.decreaseBtn.on('click', function(e) {
e.preventDefault();
var baseFontSize = parseInt(element.css('font-size'));
element.css('font-size', (baseFontSize - 1) + 'px');
});
});
};
})(jQuery);
La proprietà font-size viene calcolata in pixel. Per questo motivo dobbiamo estrarre il valore numerico da tale proprietà tramite la funzione parseInt(). A questo punto sommiamo o sottraiamo 1 al valore corrente. Esempio:
$(function() {
$('#content').fontResize();
});
Nota
Quando il valore della proprietà font-size è espresso in em o percentuali, tutti i browser restituiscono il valore in pixel. Opera non fa eccezione in questo caso. L'eccezione riguarda il valore restituito per i colori.