Alterar tamanho da fonte com javascript e Jquery

Uma coisa muito importante em um site acessível é a possibilidade  do usuário aumentar o tamanho da fonte de um site clicando em algum link específico, e para variar com javascript e JQuery essa tarefa fica muito fácil de se realizar com algumas poucas linhas de código.

Demo Download do código fonte

O que precismos fazer para aumentar o tamanho da fonte é simplesmente obter o tamanho da fonte e aumentá-lo ou diminuí-lo de acordo com a necessidade e para isso basta apenas um linha de código:

$('*').css({fontSize : '+=2'});

No caso acima usamos o seletor $('*') para pegarmos todos os elementos da página e usamos .css({fontSize : '+=2'}) para aumentarmos em 2 o valor atual da propriedade css font-size dos elementos. Note que usando $('*') nós pegamos todos os elementos da página incluse o etc. Temos então que fechar mais o escopo para atacarmos somente os elemento que nos interessa e para isso (tomando como baso o exemplo online do link no início do post) basta utilizarmos o seletor .not() e inserir os ids ou classes dos elementos que não desejamos atacar:

$('.wrap *').not('.wrap, .boxAumentar, .boxAumentar a').css({fontSize : '+=2'});

Para aumentar em 2 o tamanho atual da fonte e:

$('.wrap *').not('.wrap, .boxAumentar, .boxAumentar a').css({fontSize : '-=2'});

Para diminuirmos em 2 o tamanho atual da fonte.
Precisamos também saber qual é a ação desejeda no caso aumentar ou diminuir a fonte e precisamos de dois links para disparar essas ações então no nosso arquivo html separe um lugar reservado para esses links:

Aumentar Diminuir 

Finalizando nosso script para aumentar ou diminuir a fonte ficará da seguinte forma:

$(function(){
      function setSize(action){  
           switch(action){  
                case 'more' :  
                     $('.wrap *').not('.wrap, .boxAumentar, .boxAumentar a').css({fontSize : '+=2'});  
                     break;  
                case 'minus' :  
                     $('.wrap *').not('.wrap, .boxAumentar, .boxAumentar a').css({fontSize : '-=2'});  
                     break;  
           }  
      }  
      $('#more').bind('click', function(e){  
           setSize('more')  
           e.preventDefault();  
      });  
      $('#minus').bind('click', function(e){  
           setSize('minus')  
           e.preventDefault();  
      });  
 });  

Na linha 01 iniciamos o script JQuery.

Na linha 02 Criamos uma função que resolvi chamar de setSize(); que recebe um parâmetro no caso 'action' que será nossa action e simplesmente fazemos um switch em action para aumentar a fonte caso action seja igual a "more" e diminuir a fonte caso action seja "minus"

Nas linhas 12 e 16 damos um bind na função ao evento click dos links para aumentar e diminuir a fonte passando o parâmetro da ação desejada.

Viu só foi facinha diminuir ou aumentar o tamanho da fonte com JQuery!

Mas você deve estar falando: "Mas a função ta aumentando e diminuindo o tamanho da fonte infinitamente, não teria que parar em um determinado tamanho ou quantidade de cliques?" e eu lhe respondo sim fica ao seu critério.

Até a próxima

Tags: aumentar, fonte, Javascript, jquery, tamanho