Ir para conteúdo

Arquivado

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

Quelipe

Mudar tamanho da fonte sem JQuery

Por , em Javascript

Recommended Posts

Quelipe    15

Quelipe
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Quelipe    15

Quelipe
Postado

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+

Compartilhar este post

Link para o post
Compartilhar em outros sites

MIdNight    0

MIdNight
Postado

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 ^^

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