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