Problemas para obtener la posición de un DIV

pablo_con_dudas · #1 (**permalink**) 15/06/2006, 05:13

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

JavierB · #2 (**permalink**) 15/06/2006, 05:22

Hola pablo_con_dudas. Bienvenido al foro.

Puedes probar con:

valor = document.getElementById(nombreCapa).offsetTop;
valor = document.getElementById(nombreCapa).offsetLeft;

También puedes echar un ojo a esta página sobre como leer css externo.

Saludos,

pablo_con_dudas · #3 (**permalink**) 16/06/2006, 00:46

Hola JavierB:

Gracias por la bienvenida y por la ayuda. Con lo que me dijiste no fue suficiente del todo porque me daba coordenadas respecto al padre del elemento, pero con esa pista un poco más de búsqueda encontré unas funciones en www[punto] quirksmode[punto]org/js/findpos.html que basándose en ese par de funciones y en un bucle que va recorriendo el arbol de padres del objeto calcula las coordenadas desde el inicio del navegador.

Muchas gracias. Saludos