Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

codercss

Aumentar e diminuir o tamanho de letra do texto

Por , em Javascript

Recommended Posts

codercss    14

codercss
Postado

Olá,

Pretendo adicionar a opção de aumentar ou diminuir o tamanho da letra do texto do site. Devo fazer isso vi javascript, certo?

Como devo fazer isso? Como devo pesquisar sobre o assunto?

Algo como "How increase font height in html?" ou "Increase or decrease font height with css and javascript"? Já fiz algumas pesquisas, mas como aparece tanta coisa fico um pouco perdido!

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

basta alterar o font-size

exemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<button id="button-plus">+</button>
<button id="button-minus">-</button>

<p id="target">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta facilis est quaerat officia blanditiis veniam perferendis ipsam, quo veritatis expedita, numquam fugiat doloremque ab distinctio, eligendi ex delectus id similique!
</p>


<script>
var $plus = document.getElementById('button-plus'),
    $minus = document.getElementById('button-minus'),
    $target = document.getElementById('target');

$target.style.fontSize = '14px';

$plus.addEventListener('click', function(argument) {
  $target.style.fontSize = (getFontSize($target) + 1) + 'px';
});

$minus.addEventListener('click', function(argument) {
  $target.style.fontSize = (getFontSize($target) - 1) + 'px';
});
function getFontSize($target) {
  var fontSize = ($target.style.fontSize || '').replace(/\D/g,'');
  return parseInt(fontSize, 10);
}
</script>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

codercss    14

codercss
Postado

Olá, Obrigado pela grande ajuda

Estive a estudar o código e adicionei comentários nas partes importantes do código. Não percebo como a função getFontSize funciona. Será possível adicionar um comentário de maneira a eu perceber melhor? Obrigado

Caso seja necessário pode alterar os outros comentários: https://jsfiddle.net/ededev/mpgL8fmh/

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

function getFontSize($target) {
  var fontSize = ($target.style.fontSize || '').replace(/\D/g,'');
  return parseInt(fontSize, 10);
}
$target é o elemento alvo do qual queremos ler/alterar o font-size

$target.style.fontSize lê o tamanho atual da fonte desse elemento

($target.style.fontSize || '') faz fallback para string vazia, caso o fontSize seja null

.replace(/\D/g,''); troca tudo o que não for número por nada, trocando assim:

'14px' por '14'

parseInt(fontSize, 10); converte a string para inteiro, tornando o '14' em 14.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito