Código de JavaScript - Posición de un elemento en relación a su contenedor y/o navegador

Imágen de perfil

Posición de un elemento en relación a su contenedor y/o navegadorgráfica de visualizaciones


JavaScript

Publicado el 01 de Abril del 2014 por Xavi
3.857 visualizaciones desde el 01 de Abril del 2014. Una media de 28 por semana
Código que muestra como obtener la posición de un elemento en relación al contenedor o ventana del navegador.
Contiene una función para calcular la posición de un elemento aunque este dentro de objetos con la propiedad CSS position:relative;

Versión 1

Publicado el 01 de Abril del 2014gráfica de visualizaciones de la versión: Versión 1
3.858 visualizaciones desde el 01 de Abril del 2014. Una media de 28 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver el ejemplo aquí
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="es">
<head>
    <title>Rotar una imagen con el ratón</title>
    <meta charset="utf-8">
 
    <script>
    /**
     * Función que devuelve la posición [left,top] de un elemento en relación
     * al documento, aunque este dentro de uno o varios position:relative
     * Tiene que recibir
     */
    function getPos(elem){
        var tmp=elem;
        var left=tmp.offsetLeft;
        var top=tmp.offsetTop;
        while (tmp=tmp.offsetParent) left += tmp.offsetLeft;
        tmp=elem;
        while(tmp=tmp.offsetParent) top+=tmp.offsetTop;
        return [left,top];
    }
    </script>
 
    <style>
    .caja {
        border:1px solid;
        width:300px;
        height:100px;
        text-align:center;
    }
    .boton {
        padding:10px;
        background:#808080;
        display:inline-block;
        margin-top:10px;
        cursor:pointer;
    }
    </style>
</head>
 
<body>
 
<h1>Posición de un elemento en relación a su contenedor y/o navegador</h1>
 
 
<p>
    Pulsa sobre el botón para mostrar la posición del botón dentro de la ventana
    del navegador
    <div class="caja">
        <div class="boton" id="boton2">Click aquí</div>
    </div>
    <script>
        var pos2=document.getElementById("boton2");
        pos2.onclick=function(){
            var posleft=this.offsetLeft;
            var postop=this.offsetTop;
            alert("Left: "+posleft+"px - Top: "+postop+"px");
        }
    </script>
</p>
 
 
<p>
    Pulsa sobre el botón para mostrar la posición del botón dentro del marco
    (La única diferencia con el ejemplo anterior, es que este marco tiene el
    estilo <b>position:relative</b>)
    <div class="caja" style="position:relative">
        <div class="boton" id="boton1">Click aquí</div>
    </div>
    <script>
        var pos1=document.getElementById("boton1");
        pos1.onclick=function(){
            var posleft=this.offsetLeft;
            var postop=this.offsetTop;
            alert("Left: "+posleft+"px - Top: "+postop+"px");
        }
    </script>
</p>
 
 
<p>
    Pulsa sobre el botón para mostrar la posición del botón dentro de la ventana
    del navegador aunque el marco disponga del estilo <b>position:relative</b>
    <div class="caja" style="position:relative">
        <div class="boton" id="boton3">Click aquí</div>
    </div>
    <script>
        var pos3=document.getElementById("boton3");
        pos3.onclick=function(){
            var pos=getPos(this);
            var posleft=pos[0];
            var postop=pos[1];
            alert("Left: "+posleft+"px - Top: "+postop+"px");
        }
    </script>
</p>
 
<p><a href="http://www.lawebdelprogramador.com/">http://www.lawebdelprogramador.com/</p>
</body>
</html>



Comentarios sobre la versión: Versión 1 (0)


No hay comentarios
 

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2641