Cambio de estilos con Javascript

uniCo #1 Ene '06

Bueno me gustaria saber como cambiarle el estilo a un elemento de mi pagina. Por ejemplo que al pulsar en un <a> aumente el texto de la pagina a tal "em". He visto tutoriales por internet pero son todos de cambiar la hoja de estilos y yo lo que quiero es cambiar el estilo para tenerlos todos en una misma hoja externa, ¿me explico?

Gracias a lo que contesteis

Edit: si me lo podéis explicar como si fuese un tonto mejor porque no tengo ni zorra de javascript y tengo entendito que no es un script muy largo jeje

uniCo #2 Ene '06

intuyo que se hace con esto body.className="clase"

si es asi, como seria mas o menos el script?

he hecho una prueba porque es lo unico que se me ocurre:

P.D: No funciona xDDD

Deathtime #3 Ene '06

A ver si te ayuda.

http://www.w3schools.com/htmldom/dom_obj_style.asp

guner #4 Ene '06

No se si se puede acceder a body así porque sí ...

prueba con document.getElementByTagName('body').className.

uniCo #5 Ene '06

#4 lo he solucionado poniendo document. delante y ya funciona, ahora lo que estoy mirando es si existe algo para que en vez de asignarle un tamaño de texto "x" lo aumente, asi cada vez que clickeo aumenta un poco mas... no se si existira alguna propiedad en css que le diga que en vez de ser 24px de tamaño sea +24px (por poner un ejemplo)

Hasta ahora me funciona así:

<a href="#" onclick="aumento();">Texto</a>
</body>

pero con eso si le vuelvo a hacer click ya no me aumenta mas evidentemente xD. Soluciones?

Deathtime #6 Ene '06

Si le haces un parse que te devuelve?

Si te hace bien el parse, luego puedes sumarle lo que tu quieras.

Edit:
http://www.desarrolloweb.com/articulos/706.php?manual=26

Ahi tienes explicado el parseInt(), basicamente devuelve un numero aunque tenga texto (el em en tu caso).

Si le haces un parseInt a lo que obtienes de la clase luego le puedes sumar lo que quieras.

guner #7 Ene '06

< ?xml version="1.0" encoding="utf-8"?>

< !DOCTYPE html PUBLIC

    "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

< html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

< head>

    < meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    < title>< !-- comment here -->< /title>

    < style type="text/css">
        body.uno {
            background-color: #fff;
        }
        
        body.dos {
            background-color: #ccc;        
        }

    < /style>

    < script type="text/javascript">

    //< ![CDATA[

        function main()

        {

            var HTMLbodyS = document.getElementsByTagName('body');

            HTMLbodyS[0].className = (HTMLbodyS[0].className == 'dos' ? 'uno' : 'dos');

        }

    //]]>

    < /script>

< /head>

< body>
    < span onclick="main(); ">Click Aquí!< /span>

< /body>

< /html>

Esto me funciona perfectamente.
Edit: Si funciona con lo del document.body estupendo, aunque no se si es la forma más correcta.

Para lo de la fuente, lo mejor que puedes hacer es usar porcentajes; Te explico.

Pones un tamaño en el tag html

html {
font-size: 12px;

}

por ejemplo.

y en body usas porcentajes

body {
font-size: 100%; // 12 px; ; 90% -> ((90/100) * 12)px

}

Para sacar el tamaño creo que era:
elemento.style.fontSize
para obtener un entero:
size = parseInt(element.style.fontSize.replace('%', '')); // CREO

y a ese valor sumas y restas, por ejemplo 15% por cada click.

Perdón por explicarme tan mal, ahora subo el ejemplo

uniCo #8 Ene '06

Ami tambien me funcion guner, pero lo que yo quiero es que cada vez que le doy al Click aqui! aumente el texto no que se alternen dos clases distintas no se si me explico... aun asi gracias eh

por cierto una pregunta tonta, que es esto?
//< ![CDATA[
imagino que es un aviso de que si no acepta javascript se lo salte o me estoy colando?

ya os digo que soy un novatazo en javascript xD

#6 no habia visto tu comentario sorry, voy a ver la url...

guner #9 Ene '06

CODE TAG POR FAVOR!!!

< ?xml version="1.0" encoding="utf-8"?>
< !DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
< head>
    < meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    < title>< !-- comment here -->< /title>
    < style type="text/css">
        html {
            font-size: 12px;
        }
    < /style>
    < script type="text/javascript">
    //< ![CDATA[
        function bigger()
        {
            var HTMLo= document.body;
            var size = parseInt(HTMLo.style.fontSize.replace('%', ''));
            HTMLo.style.fontSize = (size + 20) + '%';    
        }
        
        function smaller()
        {
            var HTMLo= document.body;
            var size = parseInt(HTMLo.style.fontSize.replace('%', ''));
            HTMLo.style.fontSize = (size - 20) + '%';        
        }
    //]]>
    < /script>
< /head>
< body style="font-size: 100%">
    < span onclick="bigger(); ">Más< /span>
    < span onclick="smaller(); ">Menos< /span>
< /body>
< /html>

Lo del CDATA es para que el parser XML lo ignore.

uniCo #10 Ene '06

Muchas gracias #9
con esto si sustituyo en % por em consigo que no solo aumente el tamaño de letra si no tambien todo el tamaño dado en em de la web cierto?

guner #11 Ene '06

Creo que el tamaño en em funciona exáctamente igual que en %.

1em = 100%. no te lo digo seguro, pero creo que sí ( para fuentes :: fontSize) para anchos y altos nunca he probado em.

EDIT:

||
V Si vas a usar ems, como vas maneja flotantes, tendrás que parsear el dato numérico con parseFloat en vez de parseInt

uniCo #12 Ene '06

No, el em es la altura de la letra M de la fuente que se esté utilizando, son medidas relativas. A lo que yo me referia es si aumentaba todo en proporcion pero ya he comprobado que si. Muchas gracias por el script me va perfect

Ok, ya me estaba rallando al cambiarlo a em xDD. Eso tambien esta resuelto. Ahora mi ultima duda es por que solo funciona si el tamaño esta definido en el <body>, si yo uso este codigo no me funciona :

edit: Me he informado de que no se obtiene ningun valor si no esta especificado dentro de la etiqueta (ej: <body style="blbalba">. ¿Como puedo hacer para obtener la informacion de la hoja de estilos? lo digo para no romper una de las normas de XHTML que es tener separado el codigo del diseño...

IS4kO #13 Ene '06

Wenas, no se si ya lo habeis arreglado, pq no he leido todos los hilos pero por si acaso aquí te dejo el codigo que suelo usar yo para cambiar un elemento específico al hacer por ejemplo un mouseOver y un mouseOut:

function MostrarOver()
{
window.event.srcElement.className="Over";
}

function MostrarNormal()
{
window.event.srcElement.className="Normal";

}
</script>

Dentro del Body:

uniCo #14 Ene '06

#13 lo siento pero eso no es lo que quiero . A ver si se puede mezclar eso con lo que decimos guner y yo... el script de guner funciona bien solo que el problema llega cuando quiero separar el codigo del diseño. Es decir, lo que se ha planteado es crear un script que al pulsar en un link aumente el tamaño de todo el texto que hay en <body> cada vez que este es pulsado. El problema es que entiendo que ahora la variable se está cogiendo del <body style="blabalbla"> pero yo el style lo quiero tener en mi hoja de estilos externa. Hay alguna manera de trabajar de la misma manera que en el script de guner pero estando las propiedades de <body> en la hoja de estilos y no en el HTML? como seria? porque yo intento entenderlo, pero hay muchas partes que al ser novato en js me pierdo...

Por ejemplo, con esto document.body.className="mastext" le digo que me cargue la clase mastaxt al elemento señalado. Pero como puedo decirle en el javascript que me busque dentro de esa clase el tamaño de texto que tiene asignado y que a eso le sume 0.2em cada vez que pulso nuevamente en el link?

guner #15 Ene '06

Tuve un problema extraño con css, cuando estaba probando, en la hoja de estilos tenía body { font-size: 100%; }. Pero eso resulta undefined en document.body.fontSize, por eso puse el tag style.

Te lo pego para que te olvides de eso
    var HTMLbody = document.body;
    if (!HTMLbody.fontSize) HTMLbody.fontSize = '100%';
    function bigger()
    {
        HTMLbody.style.fontSize = (parseInt(HTMLbody.style.fontSize) + 20) + '%';
    }

    function smaller()
    {
        HTMLbody.style.fontSize = (parseInt(HTMLbody.style.fontSize) - 20) + '%';
    }

Y en la CSS pon también 100% en el tag body (o 1em y 0.20 en vez de 20)

|| Lo he editado varias veces prueva ahora, que me he ahorrado un par de variables.
V

uniCo #16 Ene '06

^
| Que raro... yo lo veo igual que el mio solo que sin el parseFloat :S

Muy bien, voy a probarlo ahora te cuento

Edit: A mi no me funciona tio no se si es que soy subnormal y no se copiar o que hago mal. Mira este es todo mi código:

<!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>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { font-size: 1em; }
</style>
<script type="text/javascript">
//< ![CDATA[
var HTMLbody = document.body;
if (!HTMLbody.fontSize) HTMLbody.fontSize = '1em';
function bigger()
{
HTMLbody.style.fontSize = (parseFloat(HTMLbody.style.fontSize) + 0.2) + 'em';
}

function smaller()
{
    HTMLbody.style.fontSize = (parseFloat(HTMLbody.style.fontSize) - 0.2) + 'em';
}

//]]>
</script>
</head>

<body>
<span><a href="" onclick="bigger()">Más</a></span>
<span><a href="" onclick="smaller()">Menos</a></span>
</body>
</html>
[/i]

P.D: Siento ser tan pesado pero es que me urge la verdad

guner #17 Ene '06

<?xml version="1.0" encoding="utf-8"?>
<!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>
    <title>Documento sin título</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        body { font-size: 1em; }
    </style>
    <script type="text/javascript">
    //< ![CDATA[
    function setSize()
    {
        if (!document.body.style.fontSize) document.body.style.fontSize = '5em';
    }
    
    function bigger()
    {
        document.body.style.fontSize = (parseFloat(document.body.style.fontSize) + 0.2) + 'em';
    }
    
    function smaller()
    {
        document.body.style.fontSize = (parseFloat(document.body.style.fontSize) - 0.2) + 'em';
    }
    //]]>
    </script>
</head>

<span><a href="#" onclick="bigger()">+</a></span>
<span><a href="#" onclick="smaller()">-</a></span>
</body>
</html>

Eso si va. El problema era que se definía el objeto HTMLbody antes de que el explorador llegara a la parte del body (bueno, y otras cosas ¬¬).

uniCo #18 Ene '06

Edit: Como habia una funcion a la que no llamaba nadie (setSize) y media-vida no tiene code-tag, pues supuse que se comio el unLoad del body. Ahora ya me funciona. Mil gracias guner, de amo eh xD

Pfff desesperante... ahora me dice que hay un argumento no valido en la linea 21, y eso que lo he copiado tal cual me lo has puesto. Aquí está el código: (si estas hasta la polla como yo dejalo, que ya me has ayudado bastante)

<!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>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size: 1em; }
</style>
<script type="text/javascript">
//< ![CDATA[
function setSize()
{
if (!document.body.style.fontSize) document.body.style.fontSize = '1em';
}

function bigger()
{
    document.body.style.fontSize = (parseFloat(document.body.style.fontSize) + 0.2) + 'em';
}

function smaller()
{
    document.body.style.fontSize = (parseFloat(document.body.style.fontSize) - 0.2) + 'em';
}
//]]>
</script>

</head>

<body>
<span><a href="#" onclick="bigger()">+</a></span>
<span><a href="#" onclick="smaller()">-</a></span>
</body>
</html>
[/i]

guner #19 Ene '06

Ésto lo tenía que haber hecho al principio:

    <script type="text/javascript">
    //<![CDATA[
    function Size(math)
    {
        document.body.style.fontSize = (
            document.body.style.fontSize
            ? eval('parseFloat(document.body.style.fontSize) ' + math + ' 0.2')
            : eval('1 ' + math + '0.2')
        ) + 'em';
    }
    //]]>
    </script>

<a href="javascript: Size('+');" >+</a>
<a href="javascript: Size('-');" >-</a>

Ahora este código me lo guardo en mis librerías que me ha quedado artístico.

uniCo #20 Ene '06

Pues si... muy guapo. Yo tengo una mania de no meter codígo en mi página que no entienda, por eso javascript nunca suelo meter. Pero esta vez corrigiendo los fallos e informandome ayer lo he entendido todo perfectamente... todo menos lo ultimo que has puesto xDDDD. Por curiosidad puedes resumirme mas o menos lo que consigues con eso ultimo?

edit: Me estás diciendo que todos los post anteriores se resumen a eso??? xDDDDD

guner #21 Ene '06

Sí, se resumen a eso.

Lo que he hecho es usar el operador ternario, que me gusta mucho a mi : D.
comprobación ? hacer si es verdadera : hacer si es falsa.
Si no obtiene un valor en document.body.style.fontSize : el valor + / - loquesea : 1em + / - loquesea.

y usar el evaluador de código eval() para evaluar el + / - que se le pasa como argumento (math) a la función.

http://josm.freeunixhost.com/muestras/sizer/test.htm

uniCo #22 Ene '06

Ah ya, entiendo el proceso solo que yo no te lo sabría hacer xDDD.

De todas formas muy guapo

Pones un tamaño en el tag html

}

y en body usas porcentajes

}

Usuarios habituales