CSS - Cambiar Tamaño Texto

Cambiar Tamaño Texto

Publicado por Zro (1 intervención) el 11/04/2006 11:17:01

Hola, estoy intentando hacer una pagina, con un texto determinado (CSS), y por medio de unos botones en javascript, que aumente o disminuya el tamaño del texto.
Os dejo el codigo, a ver si alguien sabe por que no me funciona:

<html>
<head>
<title>Pruebas</title>
<script language="JavaScript">
function zoomText(tipo){
//inicializaciones
obj=document.getElementById("BlogContainer");
if (obj.style.fontSize==""){
obj.style.fontSize="100%";
}
actual=parseInt(obj.style.fontSize);
incremento=10;

//operacion
if(tipo=="normal"){
obj.style.fontSize="100%"
}
if(tipo=="aumentar"){
valor=actual+incremento;
obj.style.fontSize=valor+"%"
}
if(tipo=="disminuir"){
valor=actual-incremento;
obj.style.fontSize=valor+"%"
}
}
</script>

<style type="text/css">
body {font-size:14px; }
p { font-size:100%; }
h1 { font-size:160%; }
h2 { font-size:140%; }
</style>
</head>

<body>
<a href="#" onClick="zoomText('aumentar','Contenido')">Aumentar</a>
<a href="#" onClick="zoomText('disminuir','Contenido')">Disminuir</a>
<a href="#" onClick="zoomText('reestablecer'),'Contenido'">Reestablecer</a>
<br><br><br>
<div id="Contenido">
texto que quiero cambiar de tamaño
</div>

</body>
</html>

Un saludo y muchas gracias

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

RE:Cambiar Tamaño Texto

Publicado por beni (1 intervención) el 22/05/2006 13:57:08

al final tienes un error,
<a href="#" onClick="zoomText('reestablecer'),'Contenido'">Reestablecer</a>
tiene que ser
<a href="#" onClick="zoomText('reestablecer','Contenido')">Reestablecer</a>

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

RE:Cambiar Tamaño Texto

Publicado por Lester Fibla (1 intervención) el 19/10/2007 05:45:09

Además fíjate en la línea

obj=document.getElementById("BlogContainer");

ahí debes poner la id del elemento que quieres controlar, en este caso

obj=document.getElementById("Contenido");

También debes corregir el nombre del parámetro "normal":

<a href="#" onClick="zoomText('normal','Contenido)'">Reestablecer</a>

Valora esta respuesta

Comentar

RE:Cambiar Tamaño Texto

Publicado por alfredo tapia (1 intervención) el 21/11/2008 02:28:33

<html>
<head>
<title>Pruebas</title>
<script language="JavaScript">
function zoomText(tipo){
//inicializaciones
obj=document.getElementById("Contenido");

if (obj.style.fontSize==""){
obj.style.fontSize="100%";
}
actual=parseInt(obj.style.fontSize);
incremento=10;

//operacion
if(tipo=="normal"){
obj.style.fontSize="100%"
}
if(tipo=="aumentar"){
valor=actual+incremento;
obj.style.fontSize=valor+"%"
}
if(tipo=="disminuir"){
valor=actual-incremento;
obj.style.fontSize=valor+"%"
}
}
</script>

<style type="text/css">
body {font-size:14px; }
p { font-size:100%; }
h1 { font-size:160%; }
h2 { font-size:140%; }
</style>
</head>

<body>
<a href="#" onClick="zoomText('aumentar','Contenido')">Aumentar</a>
<a href="#" onClick="zoomText('disminuir','Contenido')">Disminuir</a>
<a href="#" onClick="zoomText('normal','Contenido')">Reestablecer</a>

<br><br><br>
<div id="Contenido">
texto que quiero cambiar de tamaño
</div>

</body>
</html>

Valora esta respuesta

Comentar

RE:Cambiar Tamaño Texto

Publicado por AbacoIn (1 intervención) el 02/03/2009 08:28:18

Gracias Mil por tu aporte

Se Feliz y Exito....

Valora esta respuesta

Comentar

RE:Cambiar Tamaño Texto

Publicado por Salvador Castillo (1 intervención) el 29/02/2008 08:54:04

hola, no se porque no me puse a anaalizar tu código, pero hasta abajo pusiste algo que me cambió la idea de lo que yo estaba haciendo y aquí te dejo lo que me quedó como resultado..........FUNCIONA!!!..........XD

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" >
function zoomText(Accion,Elemento){
//inicializacion de variables y parámetros
var obj=document.getElementById(Elemento);
var max = 200 //tamaño máximo del fontSize
var min = 70 //tamaño mínimo del fontSize
if (obj.style.fontSize==""){
obj.style.fontSize="100%";
}
actual=parseInt(obj.style.fontSize); //valor actual del tamaño del texto
incremento=10;// el valor del incremento o decremento en el tamaño

//accion sobre el texto
if( Accion=="reestablecer" ){
obj.style.fontSize="100%"
}
if( Accion=="aumentar" && ((actual+incremento) <= max )){
valor=actual+incremento;
obj.style.fontSize=valor+"%"
}
if( Accion=="disminuir" && ((actual+incremento) >= min )){
valor=actual-incremento;
obj.style.fontSize=valor+"%"
}
}
</script>
<title>Documento sin título</title>
<style type="text/css">

</style></head>

<body>
<p><a href="#" onClick="zoomText('aumentar','Contenido')">+</a>
<a href="#" onClick="zoomText('disminuir','Contenido')">-</a>
<a href="#" onClick="zoomText('reestablecer','Contenido')">=</a></p>
<div id="Contenido">Hola Mundo</div>
</body>
</html>

Valora esta respuesta

Comentar

varios estilos CSS en web

Resolución - CSS