Personalizar Fonte E Estilo Da Página Com jQuery

Permitir ao usuário personalizar a aparência dos elementos da página não é apenas um recurso estético, mas também de usabilidade.

Por exemplo um texto de parágrafo com tamanho da fonte de 12px. Para a maioria o tamanho possibilita uma leitura confortável. Contudo, existem minorias com dificuldades diversas, entre elas oftalmológicas que podem achar o tamanho da fonte pequeno.


Sendo assim, em um website com muitos textos, disponibilizar na página a opção de aumentar o tamanho da letra é um recurso inteligente.

Vejamos como criar esta possibilidade utilizando o jQuery para alterar o tamanho da letra dos parágrafos.


A página será composta por uma div contendo texto e foto do produto e outra com os links para aumentar, diminuir e resetar o tamanho da letra.

Código:

<div class="escolhas" id="fonte">
<span class="fechar">x</span>
<p>Tamanho da fonte</p>
<a href="#" class="aumentar">A+</a>
<a href="#" class="diminuir">A-</a>
<a href="#" class="padrao">Padrão</a>
</div>

<div class="produto-div">
<img src="imagem01.jpg" width="300" height="225" alt="monitor" />
  <h2>Nome do produto</h2>
<p>Donec non felis quis augue interdum accumsan. Nulla at libero. Nunc ultricies auctor sapien. Praesent quis quam et massa tincidunt luctus. Vivamus nibh. Sed ligula. Nunc non est a augue tempor lacinia. Mauris lectus pede, porta tempus, ultrices sed, dignissim sed, justo. Suspendisse porta. Fusce arcu. Sed vehicula libero a odio. Mauris lectus pede, porta tempus.  </p>
</div>

Observe o nome das classes atribuídas, elas servirão de seletores no código javascript.


Iniciamos o código javascript preenchendo as variáveis com os valores necessários para manipular o tamanho da letra.

Código:

$(function(){
     
$('.escolhas a').click(function(){
  var normal = $('p').css('font-size');
  var recipiente = '.produto-div p';
  var acao = $(this).attr('class');
  var atual = parseFloat($(recipiente).css('font-size'));
})

})

O function no início é para que o código só execute após a árvore DOM do documento estar completa.

No documento, a div que contém os links para aumentar e diminuir a fonte, possue a classe “escolhas”.Quando um dos links for clicado é rodado o código entre as chaves.

A primeira variável recebe o valor da propriedade CSS font-size aplicado aos parágrafos. Isso serve para sabermos o tamanho padrão dos textos e mais adiante aplicar este valor quando o usuário decidir utilizar o tamanho de letra original.

No caso da página criada, o tamanho padrão dos parágrafos é 13px. E é este o valor que a variável normal recebe.

Para a variável recipiente, é indicado quais partes do documento serão afetadas pelo código. Queremos que apenas os parágrafos dentro da produto-div sejam redimensionados. Para aplicar a outra div, basta adicionar uma vírgula entre os seletores.

Volte ao arquivo HTML e veja que cada link possue uma classe distinta. É este atributo do link clicado “(this)” que popula a variável “ação”. Mais adiante você entenderá o porquê.
Por fim a variável “atual” recebe qual o tamanho da fonte no momento. O “recipiente” que serve como seletor é a variável criada logo acima que restringe a ação a determinada div. Desta, é recuperada o tamanho da letra.

O problema é que o valor vem completo, até com a unidade. Para separar o número do ‘px’, utilizamos o parseFloat. Esta função serve para retornar o primeiro número de uma string. Então“10px” tornam-se “10”.


Com todos os valores a postos vamos definir o que acontece conforme determinada ação.

Código:

if (acao == 'aumentar')
{
  var novotamanho = atual*1.1;
$(recipiente).css('font-size', novotamanho);
}

Se a variável “ação” recebeu como valor a classe “aumentar” que foi designada para o texto que contém um sinal de mais ao lado da letra A, o tamanho da letra deve ser aumentado.

O cálculo para isso é uma multiplicação simples. O tamanho atual da fonte é multiplicado por 1.1 e o resultado é recebido pela variável “novotamanho”.

Em seguida os parágrafos da div produto recebem o novo valor para a propriedade font-size através da função css do jQuery.

Podemos ir um pouco além e limitar o tamanho máximo das letras para que o layout não comece a ficar estranho demais. Para isso antes de aplicar o novo valor para o tamanho da fonte é feita uma verificação.

Código:

if (acao == 'aumentar')
{
  var novotamanho = atual*1.1;
  if (novotamanho < 36)
  {
    $(recipiente).css('font-size', novotamanho);
  }
}

Com isso o tamanho máximo da fonte será de 36px.

O código para diminuição do tamanho das letras segue a mesma lógica, só mudam os números, com o tamanho mínimo da fonte permitido de 8px.

Código:

if (acao == 'diminuir')
{
  var novotamanho = atual*0.9;
  if (novotamanho > 8)
  {
    $(recipiente).css('font-size', novotamanho);   
  }
}

Para que o tamanho da fonte retorne ao original quando o usuário clicar no link ‘padrão’, bastam esta poucas linhas.

Código:

if (acao == 'padrao')
{
  $(recipiente).css('font-size', normal)
}

O código reunido:

Código:

$('.escolhas a').click(function(){
  var normal = $('p').css('font-size');
  var recipiente = '.produto-div p';
  var acao = $(this).attr('class');
  var atual = parseFloat($(recipiente).css('font-size'));
  if (acao == 'aumentar')
  {
    var novotamanho = atual*1.1;
    if (novotamanho < 36)
    {
      $(recipiente).css('font-size', novotamanho);
    }
  }

  if (acao == 'diminuir')
  {
    var novotamanho = atual*0.9;
    if (novotamanho > 8)
    {
      $(recipiente).css('font-size', novotamanho);   
    }
  }
 
  if (acao == 'padrao')
  {
    $(recipiente).css('font-size', normal)
  }
  return false;
})

O return false no final previne que a página pule para o topo quando um dos links for clicado.


Possibilitar a alteração da aparência dos elementos da página oferece uma melhor experiência para o usuário. Não é apenas um recurso legal.

O mais incrível é como o jQuery facilitou nossa vida de programadores na hora de implantar esta funcionalidade no código.

Código:

<div id=”#cor”>
<a href="#" class="contraste" rel="contraste">Contraste</a>
<a href="#" rel="estilo">Normal</a>
</div>

O elemento chave desses links é o atributo rel.

Código:

$('#cor a').click(function(){
  var estilo =$(this).attr('rel')+ '.css';
  $('link[rel=stylesheet]').attr('href', estilo);
})

Quando um dos links dentro da div #cor for clicado, a variável “estilo” vai receber o valor do atributo rel deste link e adicionar o ‘.css’ ao final da string para formar o nome completo o arquvo. Se o primeiro link for clicado, será retornado “contraste.css” para a variável.

Em seguida o código procura na página um elemento link que possua no atributo rel o valor stylesheet. Como ele somente é utilizado para importar arquivos css para a página sabemos exatamente qual link será afetado. Então ao href desta tag será atribuído o conteúdo da variável estilo criada anteriormente.


Você sabe agora a criar duas das principais e mais úteis opções de customização de uma página. Você pode ir além e criar cookies para armazenar as preferências do usuário para que quando ele voltar à página, ela fique configurada com as mesmas opções da visita anterior.

Créditos : WebMaster