Agrandar y achicar tamaño de fuente

[FuLaNo_]

Hola gente:

Alguien sabe como puede hacerse para achicar y agrandar el tamaño de la fuente con javascript como tiene, por ejemplo, la pagina del diario La Nacion (www.lanacion.com).

Desde ya, gracias.

[thunder.scripts]

Lo que podés hacer es que se carguen diferentes hojas de estilo.
Podés tener una hoja de estilo para la estructura y todo lo que sea fijo, y otra para los textos. De ésa última hacés tres o las que necesites, con diferentes tamaños definidos para los textos y las vas cargando.

Fijate en http://www.diozmilaneza.com.ar que hace un tiempo puso un tutorial para intercambiar estilos con JavaScript o en http://www.fedeblog.com.ar/133-Style-Switcher.htm para hacerlo con PHP.

Suerte
Fede

[JavierB]

Hola FuLaNo_

Mira este código a ver si te sirve de orientación:

Código PHP:

  <script type="text/javascript">
tam=1;
function tamano(num) {
  tam+= (num=='mas') ? .1 : -.1;
  obj=document.getElementsByTagName('*');
  for(i=0;el=obj[i];i++)
    el.style.fontSize=tam+'em';
}
</script> 
  

Lo llamas con tamano('mas') para aumentar y tamano('menos') para disminuir el tamaño de la fuente.

Saludos,

[FuLaNo_]

JavierB ese codigo es lo que yo necesitaba!.

Tengo un problema, como puedo hacer para que el "menor" solo baje hasta que el texto sea de 10px y el mayor solo suba hasta 16px?

Perdón pero de javascript se menos que de todo lo demas =/

El texto default es de 10px (es decir, el documento se abre con ese tamaño) por si sirve de algo...

[FuLaNo_]

Hola:

Lo hice de esta forma:

Código PHP:

  <script type="text/javascript">
tam=1;
function t(num) {
  if (num == '+') {
    tam=tam+1;  
  if (tam == 1) { obj=document.getElementsByTagName('*'); for(i=0;el=obj[i];i++) el.style.fontSize='10'; }
  if (tam == 2) { obj=document.getElementsByTagName('*'); for(i=0;el=obj[i];i++) el.style.fontSize='11'; }
  if (tam == 3) { obj=document.getElementsByTagName('*'); for(i=0;el=obj[i];i++) el.style.fontSize='12'; }
    }
  if (num == '-') {
  if (tam == 1) {  }
  if (tam == 2) { obj=document.getElementsByTagName('*'); for(i=0;el=obj[i];i++) el.style.fontSize='10'; tam=1; }
  if (tam == 3) { obj=document.getElementsByTagName('*'); for(i=0;el=obj[i];i++) el.style.fontSize='11'; tam=2; }
    }
}
</script> 
  

Si tienen una mejor manera...

[Carlitos]

Hola.

Otra forma de hacerlo.

Código:

<script>
var a = 10
function fuente(bit)
{
if (bit == '1') a++
else a--
if (a < 10) a = 10
if (a > 16) a = 16
document.body.style.fontSize = a + "px"
}
</script>
<input type="button" value="+" onclick="fuente(1)">
<input type="button" value="-" onclick="fuente(0)">

Y como curiosidad: Pulsando la tecla CTRL y moviendo la rueda del ratón, también modificamos el tamaño de la fuente.

Un saludete.