Aumentar y disminuir el tamaño de la letra

carlosgs91 · #1 (**permalink**) 27/05/2007, 09:59

Hola, alguien sabeis de algun javascript que permita aumentar y disminuir el tamaño de letra de un div determinado.

Por ejemplo:

Código HTML:

<div class="texto">Probando</div>

aumentar y disminuir el tamaño de probando segun le des a los botones de + y -.

programeitor · #2 (**permalink**) 27/05/2007, 17:55

Hola... mas que un ·class· ponle un ·id·, y mediante:

document.getElementById("el id").fontSize, le cambias el tamaño.

stock · #3 (**permalink**) 27/05/2007, 18:26

mira, te recomiendo la librería de mootools http://mootools.net con esta puedes aplicar clases tanto a varios parrafos, como a uno solo, por medio de clases o identificadores, la verdad nunca he hecho algo semejante, pero no se ve complicado

have funnnnnnnnnnnnn

seoista · #4 (**permalink**) 28/05/2007, 01:45

Hola carlosgs91, mira si te sirve esto:

Cita:

<html>
<head>

<title>Cambiar el tamaño de la fuente</title>

<script>
function tamano(valor) {
tam = parseFloat(document.body.style.fontSize);
tam += valor;
elem = document.getElementsByTagName('*');
for(i=0;ele=elem[i];i++)
ele.style.fontSize=tam+'em';
}
</script>

</head>

<body style="font-size:1em">

<input type="button" value="+" onclick="tamano(.1)" />
<input type="button" value="-" onclick="tamano(-.1)" />

<div>Esto es el texto que vamos a aumentar</div>

</body>
</html>

Saludos

carlosgs91 · #5 (**permalink**) 28/05/2007, 13:49

Gracias, pero encontre uno en el buscador del foro y lo modifique un poco de nada, quedaría así:

Código javascript:

Código PHP:

  <SCRIPT type=text/javascript> 

var newsfont = 16; 

function changeFont(id) { 

 
if (document.getElementById) { 

        document.getElementById(id).style.fontSize = newsfont+"px"; 

    } else { 

        if (document.layers) { 

            document.layers[id].fontSize = newsfont+"px"; 

        } else { 

            if (document.all) { 

                eval("document.all." + id + ".style.fontSize = \"" + newsfont + "px \""); 

            } 

        } 

    } 

     

    // esto arregla scroll al utilizar layers 

//    updateHeight();  

    setCookie(); 

} 

// aqui se produce el error 

function larger() { 

    if (newsfont < 20) { 

        newsfont= newsfont +1; 

        changeFont('content'); 

    } 

} 

 
function smaller() { 

    if (newsfont > 10) { 

    newsfont= newsfont -1; 

    changeFont('content'); 

    } 

} 

</SCRIPT>

pones luego

Código HTML:

<A onmousedown='larger()' href='javascript:void(0);'><img src='imagenes/font_add.png' ' alt='+' border='0'></A> <A onmousedown='smaller()' href='javascript:void(0);'><img src='imagenes/font_delete.png'' alt='-' border='0'></A> <a href=javascript:ventanaSecundaria('imprimir.php')><img src='imagenes/imprimir.png' alt='Imprimir' width='16' height='16' border='0' /></a>

<div id="content">Texto</div>

Podeis verlo en funcionamiento en el proyecto de mi website personal:

carlosgomezsuarez.uni.cc