Publicado em 28 de fev.

Mudar tamanho da fonte sem JQuery

Como não tenho muita intimidade com JQuery e acho que muitos são iguais a mim, então fiz esse pequeno código para alterar o tamanho da fonte de uma determinada div

Segue o código:

<html>
<head>
	<script>
 function aumentaFonte() {
 //Pega o tamanho original da fonte neste caso 12px
 tamanhoOriginal = document.getElementById('corpo').style.fontSize;
 // da um split para separar o número da string 'px' para aumentar o tamanho
 // irá gerar um vetor de 1 posição, a zero
 vetor = tamanhoOriginal.split('px');
 //pega o vetor 0 e acrescenta 5 para alterar o tamanho
 novoTamanho = parseInt(vetor[0])+5;
 //escreve novamente o style da div com o novo tamanho de fonte
 document.getElementById('corpo').style.fontSize = novoTamanho +'px';
 }
	</script>
</head>
<body>
<input type='button' value='Aumenta Fonte' onclick='aumentaFonte()'>
<div id='corpo' style='font-size:12px'>

Aqui entra o assunto

</div>
</body>
</html>

É claro que mem se compara com a usabilidade de uma JQuery, mas é uma solução rápida e simples para quem não a domina.

Atenciosamente,

Edimilson Quelipe

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Quelipe· 1 de mar.

Fiz uma alteração no código para aumentar e diminuir a fonte, pois no anterior só aumentava.

Agora, quando a função é chamada no evento onclick, passo um parametro do tipo string informando o que eu quero fazer, aumentar ou diminuir a fonte, esse parametro é '+' ou '-'.

Para ver funcionando clique aqui.

Segue o código:

<html>
<head>
<script>
function aumentaFonte(sinal) {
	//Pega o tamanho original da fonte neste caso 12px
	tamanhoOriginal = document.getElementById('corpo').style.fontSize;
	// da um split para separar o número da string 'px' para aumentar o tamanho
	// irá gerar um vetor de 2 posições e vamos usar a posisão zero
	vetor = tamanhoOriginal.split('px');
	//pega o vetor 0 e acrescenta ou diminui 5 para alterar o tamanho
	if(sinal == '+') {
 novoTamanho = parseInt(vetor[0])+ 5;
	} else {
 novoTamanho = parseInt(vetor[0])- 5;
	}
	//escreve novamente o style da div com o novo tamanho de fonte
	document.getElementById('corpo').style.fontSize = novoTamanho +'px';
}
</script>
</head>
<body>
<input type='button' value='Aumenta Fonte' onClick="aumentaFonte('+')">
<input type='button' value='Diminui Fonte' onClick="aumentaFonte('-')">
<p> </p>
<div id='corpo' style='font-size:12px; width:450px'>

Aqui entra o conteudo.

</div>
</body>
</html>

At+

MIdNight· 7 de mar.

Gostei :D

Tenta colocar um .match para verificar se tem o px na fonte. Tb poe para checar se ja tem uma fonte pretedeterminada, se n tiver você poe como 12 ^^

nuque· 11 de mai.

Legal.

Vai ser bastante útil.