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

Versión 1
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 1 de Abril del 2014gráfica de visualizaciones de la versión: Versión 1
16.793 visualizaciones desde el 1 de Abril del 2014
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 (1)

giovanni
13 de Mayo del 2018
estrellaestrellaestrellaestrellaestrella
Muchas Gracias, Me salvo la life :'v
Responder

Comentar la versión: Versión 1

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

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2641