Publicado em 4 de mai.

Aumentar e diminuir fonte de texto dinâmico

Bom dia galera!

Depois de mto pesquisar e não encontrar a solução, recorro a vocês novamente:

Estou fazendo uma página de "Cursos" para um site. Nele haverá uma lista com os nomes dos cursos diponiveis, que, ao ser clicado, abrirá a página com o respectivo curso.

Estou usando javascript para aumentar e diminuir as fontes:

var tam = 12;

function mudaFonte(tipo,elemento){
	if (tipo=="mais") {
 if(tam<18) tam+=1;
 createCookie('fonte',tam,365);
	} else {
 if(tam>9) tam-=1;
 createCookie('fonte',tam,365);
	}
	document.getElementById("tamanho").style.fontSize = tam+'px';

}

Acontece que não consigo alterar a fonte desses links, apenas do resto do conteudo da página.Como devo proceder para que a fonte desses links seja editável?

Coloquei a id "tamanho" dentro do link (<a href=pagina.asp id=tamanho) mas como o elemento tem q ser unico, ele soh edita o primeiro link. Coloquei uma div antes do loop, mas também não funciona.

<div id=tamanho>
<table>

<% While Not rec.EOF %>

<tr>
<td>
<a href=cursos_detalhe.asp?curso=<%=rec("ID") %>><%=rec("titulo")%></a>
</td>
</tr>

<% rec.MoveNext Wend %>

</table>
</div>

Alguém pode me esclarecer?

Muito Obrigado!

Discussão (8)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Public2004· 4 de mai.

Faço assim e funciona de boa para todos os elementos que estão dentro da div mencionada (tamanho):

<a href="#" onclick="document.getElementById('tamanho').style.fontSize='2em';return false;">aumentar</a><br />
<a href="#" onclick="document.getElementById('tamanho').style.fontSize='1em';return false;">diminuir</a>

Att.

suxz· 4 de mai.

Valeu Public2004, mas ta acontecendo a msm coisa...

Só aumenta o texto estático da página, ou então apenas o 1° link

Public2004· 4 de mai.

Engraçado, testei aqui e funcionou com todos elementos na DIV pai (tamanho) - Tabela, parágrafos, links, etc...

Você por acaso não tem outros elementos identados dentro desta div tamanho os quais não sofrem as alterações??

Att.

suxz· 5 de mai.

Engraçado mesmo...aqui não funciona nem com reza braba

Troquei a div de lugar, troquei o nome dela pra nao confundir com com outro script, troquei até o código asp pra testar, mas nada.

Segue o código (a div pai agora chama-se 'acessibilidade'):

<body>
<a href="#" onclick="document.getElementById('acessibilidade').style.fontSize='2em';return false;">aumentar</a><br />
<a href="#" onclick="document.getElementById('acessibilidade').style.fontSize='1em';return false;">diminuir</a>

<div class="style4" align="center">Cursos</div>
<br />
<div align="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat, sapien sed <br />
 vehicula laoreet, nisl erat feugiat elit,
 vitae blandit est ligula a urna.</div>
<br />
<div id=acessibilidade>
<b class="nav">
<table align="center">

<% While Not rec.EOF %>

	<tr>
 <td cellpadding=0 cellspacing=0 height=27 width=15 align="left" valign="center">
 <a href=cursos_detalhe.asp?curso=<%=rec("ID")%>><img src=imagens/layout/marcador.gif border=0></a>
 </td>
 <td cellpadding=0 cellspacing=0 height=27 align="left" valign="center">
 <a href=cursos_detalhe.asp?curso=<%=rec("ID") %>><%=rec ("titulo")%></a>
 </td>
	</tr>

<% rec.MoveNext Wend %>

</table>
</b>
</div>

</body>

Quando coloco a div pai logo abaixo do body, apenas o Lorem ipsum altera. Assim, como esta no código postado, nada altera.

desisto· 5 de mai.

ponha um texto 'teste' antes da <table>, ele pode nao estar jogando a alteração pro elemento da tabela

como esta seu css? esta usando !important?

o !important nao permite alteração

suxz· 5 de mai.

Eh isso memo desisto. Na vdd não foi só isso. A table e a tag "b" estavam atrapalhando.

Resolvido! valeu aos dois ae!

desisto· 5 de mai.

beleza :)

a tag B é usada pra palavras

a tag strong é pra frases

mas evite coloca-las antes de qq coisa, elas são usadas dentro e não fora

<div><b>palavra</b>

 

<div><strong>minha frase</strong>

xanburzum· 6 de mai.

olha este exemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript">

// Início do código de Aumentar/ Diminuir a letra

// Para usar coloque o comando: "javascript:mudaTamanho('tag_ou_id_alvo', -1);" para diminuir
// e o comando "javascript:mudaTamanho('tag_ou_id_alvo', +1);" para aumentar

var tagAlvo = new Array('p'); //pega todas as tags p//

// Especificando os possíveis tamanhos de fontes, poderia ser: x-small, small...

var tamanhos = new Array( '9px','10px','11px','12px','13px','14px','15px' );
var tamanhoInicial = 2;

function mudaTamanho( idAlvo,acao ){
 if (!document.getElementById) return
 var selecionados = null,tamanho = tamanhoInicial,i,j,tagsAlvo;
 tamanho += acao;
 if ( tamanho < 0 ) tamanho = 0;
 if ( tamanho > 6 ) tamanho = 6;
 tamanhoInicial = tamanho;
 if ( !( selecionados = document.getElementById( idAlvo ) ) ) selecionados = document.getElementsByTagName( idAlvo )[ 0 ];

 selecionados.style.fontSize = tamanhos[ tamanho ];

 for ( i = 0; i < tagAlvo.length; i++ ){
 tagsAlvo = selecionados.getElementsByTagName( tagAlvo[ i ] );
 for ( j = 0; j < tagsAlvo.length; j++ ) tagsAlvo[ j ].style.fontSize = tamanhos[ tamanho ];
 }
}

// Fim do código de Aumentar/ Diminuir a letra

</script>
</head>

<body>
<a class="menos" href="javascript:mudaTamanho('texto', -1);">Diminuir</a>
<a class="mais" href="javascript:mudaTamanho('texto', 1);">Aumentar</a>

<div style="font-size: 11px;" id="texto">
 <p>texto... </p>
</div>

</body>
</html>