Ir para conteúdo

POWERED BY:

Arquivado

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

raphaeltsr

[Resolvido] Pegar valor "font-size" de um css.

Por , em Javascript

Recommended Posts

raphaeltsr    0

raphaeltsr
Postado

Olá, acho q o título do tópico já auto-explicável. Preciso pegar o valor atual do font-size de uma div para aumentar ou diminuir essa fonte de acordo com a vontade do visitante (controlado por links de + e -).

 

 

Só não consigo pegar o valor atual do font-size, preciso sempre setar um valor padrão dentro da função em JS e só consigo aumentar uma vez ou diminuir uma vez!

 

Segue o que consegui produzir:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>	<head>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />		<title>Exemplo de Alteração de Fonte em JS</title>	</head>	<style type="text/css">		#conteudo		{			font-family: verdana, tahoma, sans-serif;			font-size: 11px;			color: #000;		}	</style>	<script type="text/javascript">			//Facilitador de código			function $(id)			{				return document.getElementById(id);			}						//Dar o id do layer e se quer aumentar ou diminuir a fonte.			function mudaFonte(id, opt)			{				var tamPadrao = 11;				if(opt == 'aumentar')				{					var  tamNovo = tamPadrao + 1;				}				else if(opt == 'diminuir')				{					tamNovo = tamPadrao - 1;				}								$(id).style.fontSize = tamNovo+"px";			}	</script>	<body>		<div id="conteudo">			Teste.		</div>		<br /><br />		<a href="#" onclick="javscript:mudaFonte('conteudo', 'aumentar');">+ Fonte</a> | <a href="#" onclick="javscript:mudaFonte('conteudo', 'diminuir');">- Fonte</a>	</body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

se você fizer assim:

 

var ValorAtual = $(id).style.fontSize;
pronto você pegou o valor atual da font

 

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

raphaeltsr    0

raphaeltsr
Postado

Tentei fazer um alert pra ver se pegava o valor, e nada acontece no alert. Ele vem em branco.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>	<head>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />		<title>Exemplo de Alteração de Fonte em JS</title>	</head>	<style type="text/css">		#conteudo		{			font-family: verdana, tahoma, sans-serif;			font-size: 11px;			color: #000;		}	</style>	<script type="text/javascript">			//Facilitador de código			function $(id)			{				return document.getElementById(id);			}						//Dar o id do layer e se quer aumentar ou diminuir a fonte.			function mudaFonte(id, opt)			{				var ValorAtual = $(id).style.fontSize;				alert(ValorAtual);							}	</script>	<body>		<div id="conteudo">			Teste.		</div>		<br /><br />		<a href="#" onclick="javscript:mudaFonte('conteudo', 'aumentar');">+ Fonte</a> | <a href="#" onclick="javscript:mudaFonte('conteudo', 'diminuir');">- Fonte</a>	</body></html>

PS: quando coloquei o valor na tag <div> rolou certinho! Será que tô usando o método errado? Ao invés de getElementById pra pegar da <div> deveria ser outro pra pegar do <style>?

Compartilhar este post

Link para o post
Compartilhar em outros sites

raphaeltsr    0

raphaeltsr
Postado

Problema resolvido!

 

Código final:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>	<head>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />		<title>Exemplo de Alteração de Fonte em JS</title>		<style type="text/css">		#conteudo		{			font-family: verdana, tahoma, sans-serif;			color: #000;		}	</style>	<script type="text/javascript">			//Facilitador de código			function $(id)			{				return document.getElementById(id);			}						//Dar o id do layer e se quer aumentar ou diminuir a fonte.			function mudaFonte(id, opt)			{				var ValorAtual = $(id).style.fontSize;				var valor = ValorAtual.replace("px", "");				valor = parseInt(valor, 10);								if(opt == 'aumentar')				{					var total = valor + 1;				}				else if(opt == 'diminuir')				{					var total = valor - 1;				}								total = total + "px";				$(id).style.fontSize = total;			}	</script>	</head>	<body>		<div id="conteudo" style="font-size: 11px;">			Teste.		</div>		<br /><br />		<a href="#" onclick="javscript:mudaFonte('conteudo', 'aumentar');">+ Fonte</a> | <a href="#" onclick="javscript:mudaFonte('conteudo', 'diminuir');">- Fonte</a>	</body></html>

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