Hola a todas y todos:
El problema que tengo es que necesito averigüar la posición de un div porque al pulsar un enlace quiero mostrar una capa tipo popup con otro div sobre el que contiene el enlace. El problema es que document.getElementById(nombreCapa).style.top no me devuelve nada excepto cuando a nombreCapa le asigné previamente su posición y no cuando se colocó en su posición por defecto. ¿Como habría que hacerlo?
También he comprobado que solo puedo obtener la posición del div cuando se la fijé previamente con un estilo inline, con cualquiera de las otras formas de definición de estilos que probé (hoja de estilos en fichero aparte y sección style en el body o en la cabecera) no funciona. Al principio pensé que podía ser un bug del navegador pero lo probé en FF y en IE y falla en los dos pero tampoco logro ver el error o entender porqués es así. Un código de ejemplo de esto es el siguiente:
Código HTML:
<HEAD>
<script type="text/javascript">
function mover(nombreCapa)
{
valor=document.getElementById(nombreCapa).style.top;
//alert(nombreCapa +' valor '+valor);
numero=parseInt(valor);
numero+=5;
document.getElementById(nombreCapa).style.top=numero;
}
</SCRIPT>
<style type="text/css">
.capa{
padding:2 2 2 2px;
position:absolute;
width:100px;
height:100px;
top:100px;
border: 1px solid #666666;
}
#capa2{
background-color:red;
left:300px;
}
#capa1{
background-color:blue;
left:100px;
}
</STYLE>
</HEAD>
<BODY BGCOLOR="white">
<div class="capa" id="capa1" style="top:100px; ">Capa 1</div>
<div class="capa" id="capa2" >Capa 2</div>
<form name="miform" action="#">
<input type="button" onclick="mover('capa1');" value="Mover Capa">
<input type="button" onclick="mover('capa2');" value="Mover Capa2">
</form>
</BODY>
</HTML> Muchas gracias a todos por toda la ayuda y consejos que podais darme:
Pablo