Como Aumentar E Diminuir Fonte Do Texto

Oi, Bruno! Tudo bem?

Olha, kra... Se é com layers, ou como for, não fará diferença. Eu vejo duas formas de solucionar seu problema. Uma é você definir as características do texto em sua página em uma classe específica na tag STYLE (por exemplo a classe genérica que controla as características de todas as tags DIV, ou então cria-se uma classe .texto e aponta toda a sua página para usar esta classe), e os botões + e - farão o papel de controlarem a formatação desta classe.

Outra forma é você guardar todo o texto em um container específico. Por exemplo, um DIV, como mostrado abaixo:

<div id=texto>
AQUI VAI TODO O CONTEÚDO DA PÁGINA
</div>

E os botões + e - farão o papel de definirem o estilo deste container.

As duas formas que eu citei obrigam que você defina um único tamanho de fonte para a página inteira. Mas você pode dividir as formatações em diferentes classes ou diferentes containers e o papel dos botões + e - será, então, de especificar o tamanho de cada um separadamente. Creio que esta parte não deve ser difícil se você ver como se faz para apenas um estilo de texto em toda a página. Lá vai como ficaria:

JEITO 1 - Classe na tag STYLE:

<html><head><style>
.texto {font:12 arial}
</style><script language=JavaScript>
var tam=12;
function fonte(x) {
    tam+=x;
    if(tam>16) tam=16;
    if(tam<8) tam=8;
    document.styleSheets[0].rules[0].style.fontSize=tam;
}
</script></head>
<body>
<input type=button value="+" onClick=fonte(1)>
<input type=button value="-" onClick=fonte(-1)>
<div class=texto>blá-blá-blá...</div>
</body></html>

Apenas uma observação para este jeito: não sei se ele funciona em navegadores diferentes de IE. Aqui onde posso testar agora só tem IE, e não consigo acessar páginas para consulta referências de outros navegadores.

Entenda que a estrutura é a seguinte: dentro de um documento pode conter várias tags <style>. "document.styleSheets[0]" faz referência à primeira tag <style> que aparece na sua página. Ou seja, a regra a ser criada precisa estar dentro da primeira tag <style>. Se estiver na segunda, referencia assim: "document.styleSheets[1]". "rules[0]" é referência à primeira regra (classe) definida dentro desta tag <style>. Ou seja, se minha tag <style> fosse assim:

<style>
.classeA {blá-blá-blá}
.texto {font:12 arial}
</style>

Então eu teria que fazer acesso à classe texto da seguinte forma:

document.styleSheets[0].rules[1]

O resto é auto-dedutivo, mas estarei pronto a qualquer dúvida.

Vamos agora ao próximo jeito:

JEITO 2 - Texto da página dentro de um container identificado:

<html><head><script language=JavaScript>
var tam=12;
function fonte(x) {
    tam+=x;
    if(tam>16) tam=16;
    if(tam<8) tam=8;
    document.all.texto.style.fontSize=tam;
}
</script></head>
<body>
<input type=button value="+" onClick=fonte(1)>
<input type=button value="-" onClick=fonte(-1)>
<div id=texto style="font:12 arial">blá-blá-blá...</div>
</body></html>

Espero ter ajudado! Se tiver alguma dúvida, é só perguntar!

Um abraço,
Thales Medeiros.

#1 Bruno66

#2 Thales Medeiros

#3 Bruno66

#4 HaroNism

#5 HaroNism

#6 HaroNism

#7 HaroNism

1 user(s) are reading this topic