Llamar función js fuera de un evento.

Javier F. · #1 (**permalink**) 21/05/2006, 18:31

Seguro que es muy simple, pero no me sale. Intento llamar a una función que asigna un estilo altura a una capa, justo antes de que esta se muestre, pero no hay manera.

Código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
function ampliar(){
	var altura=100;
	document.getElementById('relleno').style.height = altura+'px';
}
</script>
</head>

<body>

<script language="javascript">
	ampliar();
</script>

<div id="relleno" style="border:1px solid black; background-color:#00FF00;">
primero
</div>
<div>segundo</div>

</body>
</html>

Si pongo la llamada a la función en un evento, por ejemplo:

Código:

<body onload="javascript: ampliar();">

entonces sí que funciona.

¿Alguien sabe como llamar a esta función con el primer código?

Muchas gracias,
Javier

JavierB · #2 (**permalink**) 22/05/2006, 00:56

Hola Javier F.

Está llamando a la función bien, pero esa función ejecuta la línea:

document.getElementById('relleno').style.height = altura+'px';

antes de que se "cree" el <div id="relleno"> y eso te dará un error. Tendrías que hacerlo al revés:

Código:

<div id="relleno" style="border:1px solid black; background-color:#00FF00;">
primero
</div>
<script type="text/javascript">ampliar();</script>

Saludos,

Javier F. · #3 (**permalink**) 22/05/2006, 02:18

Era eso. Yo pensé que de alguna forma ese valor modificaría el de la hoja de estilos.

Mi problema es que la altura de una capa debe ser, como mínimo, igual de alta que otra creada antes. Por tanto capturo la altura de la primera capa y debería dárselo a la segunda, pero lo interesante sería hacerlo antes o en el mismo instante de crearla, para evitar el efecto persiana, es decir, que cargue todo lo de esa página y luego acabe de darle la altura.

Con PHP sería fácil, caso de poder pasárle con una variable la altura de la primera capa:

Código:

<div id="relleno" style="height:<?php echo $altura ?>">....

pero mi imagino que con javascript esto no es posible.

Un saludo y gracias,
Javier

JavierB · #4 (**permalink**) 22/05/2006, 02:41

Hola de nuevo.

Se me ocurre que puedes hacer algo así:

Código:

<script type="text/javascript">
document.write('<div id="relleno" style="height:' + altura +'">');
</script>

Saludos,

Javier F. · #5 (**permalink**) 22/05/2006, 04:02

Gracias, mira que le di vueltas, y a veces lo más sencillo es lo menos evidente.

Javier