Javascript

Função para aumentar ou diminuir o tamanho da fonte – Javascript

Como aumentar ou diminuir o tamanho da fonte utilizando apenas Javascript.

Primeira parte temos a função para aumentar o tamanho da fonte.

function aumentarLetra(){
  var font = document.getElementById("Conteudo").style.fontSize;
  font = font.replace("px","");
  
  if(font == ""){   
           document.getElementById("Conteudo").style.fontSize = "13px";
  }else{
    document.getElementById("Conteudo").style.fontSize = (parseInt(font)+1)+"px";
  }
}

Agora temos a função para diminuir o tamanho da fonte.

function diminuirLetra(){
  var font = document.getElementById("Conteudo").style.fontSize;
  font = font.replace("px","");
  
  if(font == ""){   
           document.getElementById("Conteudo").style.fontSize = "11px";
  }else{
    document.getElementById("Conteudo").style.fontSize = (parseInt(font)-1)+"px";
  }
}

Exemplo de utilização

Exemplo HTML utilizando as duas funções para manipular a div com o ID “Conteudo”.

<a >

Não se esqueça de incluir às funções entre as tags <script></script> no seu arquivo HTML.

Ver comentários

  • Como fazer isso funcionar ?

    document.getElementById("VelocidadeDaLuz") .style.fontSize("14px").innerHTML = VM; ?

    Obrigado !

Post Recentes

YouTube sem cookie: adiar o embed do vídeo e do Maps até o aceite

Seu banner de consentimento está certo, mas o vídeo incorporado grava cookie de terceiro no primeiro carregamento. Troque o domínio…

8 horas atrás

Custom post type dando 404: flush_rewrite_rules na ativação do plugin

A listagem do custom post type abre e o single dá 404 no WordPress 6.9. Entenda o cache das rewrite…

2 dias atrás

systemd timer no lugar do cron: agendar script com log e sem execução dupla

Um par .service e .timer substitui a linha do crontab com log no journal, execução perdida recuperada no boot e…

2 dias atrás

Descrição em massa no WooCommerce: wp eval-file lendo a lista de SKUs

400 produtos importados do fornecedor com a aba Descrição vazia. Um wp eval-file percorre os SKUs sem texto, grava pelo…

2 dias atrás

Frete grátis no WooCommerce: esconder as outras opções de entrega

Some com PAC e SEDEX da lista quando o frete grátis está disponível, usando woocommerce_package_rates, e limpe o cache de…

3 dias atrás

Erro HTTP no WordPress ao enviar imagem para a biblioteca de mídia

A barra de upload chega no fim e o WordPress devolve só "Erro HTTP". Separe as três causas: Imagick barrado…

3 dias atrás