Obtener la posición (X, Y) del elemento HTML

Quiero saber cómo obtener la posición X e Y de elementos HTML como img y div en javascript.

853
14 янв. dado monaung 14 de enero 2009-01-14 12:35 '09 a las 12:35 2009-01-14 12:35
@ 22 respuestas

El enfoque correcto es utilizar element.getBoundingClientRect() :

 var rect = element.getBoundingClientRect(); console.log(rect.top, rect.right, rect.bottom, rect.left); 

Internet Explorer admite esto, siempre y cuando sea probable que lo cuides , y finalmente se ha estandarizado en las vistas CSSOM . Todos los otros navegadores lo han aceptado.

Algunos navegadores también devuelven las propiedades de altura y anchura, aunque esto no es estándar. Si le preocupa la compatibilidad anterior con el navegador, consulte estas versiones de las respuestas para obtener una implementación degradada optimizada.

Los valores devueltos por element.getBoundingClientRect() refieren a la ventana element.getBoundingClientRect() . Si lo necesitas en relación con otro elemento, simplemente resta un rectángulo de otro:

 var bodyRect = document.body.getBoundingClientRect(), elemRect = element.getBoundingClientRect(), offset = elemRect.top - bodyRect.top; alert('Element is ' + offset + ' vertical pixels from <body>'); 
1095
09 июля '12 в 17:06 2012-07-09 17:06 la respuesta la da Andy E el 9 de julio de 2012 a las 17:06 2012-07-09 17:06

Las bibliotecas alcanzan cierta longitud para obtener compensaciones exactas para un elemento.
Aquí hay una función simple que realiza el trabajo en cualquier circunstancia que haya intentado.

border=0
 function getOffset( el ) { var _x = 0; var _y = 0; while( el  !isNaN( el.offsetLeft )  !isNaN( el.offsetTop ) ) { _x += el.offsetLeft - el.scrollLeft; _y += el.offsetTop - el.scrollTop; el = el.offsetParent; } return { top: _y, left: _x }; } var x = getOffset( document.getElementById('yourElId') ).left; 
238
14 янв. la respuesta es dada por meouw 14 de enero 2009-01-14 13:04 '09 a las 13:04 2009-01-14 13:04

Funcionó para mí (cambiado de la respuesta más votada):

 function getOffset(el) { el = el.getBoundingClientRect(); return { left: el.left + window.scrollX, top: el.top + window.scrollY } } 

Usando esto, podemos llamar

 getOffset(element).left 

o

 getOffset(element).top 
102
29 янв. La respuesta la da Adam Grant el 29 de enero. 2015-01-29 21:46 '15 a las 21:46 2015-01-29 21:46

Si la página incluye - al menos cualquier "DIV", la función especificada por meouw devuelve el valor "Y" fuera de los límites de la página actual. Para encontrar la posición exacta, debe procesar tanto el "offsetParent" como el "parentNode".

Pruebe el siguiente código (se comprueba para FF2):

 var getAbsPosition = function(el){ var el2 = el; var curtop = 0; var curleft = 0; if (document.getElementById || document.all) { do { curleft += el.offsetLeft-el.scrollLeft; curtop += el.offsetTop-el.scrollTop; el = el.offsetParent; el2 = el2.parentNode; while (el2 != el) { curleft -= el2.scrollLeft; curtop -= el2.scrollTop; el2 = el2.parentNode; } } while (el.offsetParent); } else if (document.layers) { curtop += el.y; curleft += el.x; } return [curtop, curleft]; }; 
28
12 авг. La respuesta la da Refik Ayata 12 ago. 2010-08-12 23:14 '10 a las 23:14 2010-08-12 23:14

Puede agregar dos propiedades a Element.prototype para obtener la parte superior / izquierda de cualquier elemento.

 var x = document.getElementById( 'myDiv' ).documentOffsetLeft; 

Aquí hay una comparación de demostración de los resultados con jQuery offset().top y .left : http://jsfiddle.net/ThinkingStiff/3G7EZ/

26
14 янв. La respuesta la da ThinkingStiff el 14 de enero. 2012-01-14 11:57 '12 a las 11:57 2012-01-14 11:57

Para obtener una posición relativa a la página de manera eficiente y sin usar una función recursiva:

 var element = document.getElementById('elementId'); //replace elementId with your element Id. var rect = element.getBoundingClientRect(); var elementLeft,elementTop; //x and y var scrollTop = document.documentElement.scrollTop? document.documentElement.scrollTop:document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft? document.documentElement.scrollLeft:document.body.scrollLeft; elementTop = rect.top+scrollTop; elementLeft = rect.left+scrollLeft; 
20
26 июля '13 в 4:49 2013-07-26 04:49 Abdul Rahim Haddad respondió el 26 de julio de '13 a las 4:49 de 2013-07-26 04:49

Los elementos HTML en la mayoría de los navegadores tendrán: -

 offsetLeft offsetTop 

Ellos determinan la posición de un elemento en relación con su padre más cercano, que tiene un diseño. Se puede acceder a este objeto principal a través de la propiedad offsetParent.

IE y FF3 tienen

 clientLeft clientTop 

Estas propiedades son menos comunes, definen la posición de los elementos con el área del cliente de sus padres (el área rellena es parte del área del cliente, pero el límite y el margen no lo son).

18
14 янв. La respuesta es dada por AnthonyWJones el 14 de enero. 2009-01-14 12:43 '09 a las 12:43 2009-01-14 12:43

Puede ser mejor si utiliza un marco javascript que tiene funciones para devolver dicha información (¡y mucho más!) Independientemente del navegador. Aquí hay algunos:

Dentro de este marco, puedes hacer algo como: $('id-of-img').top para obtener las coordenadas del píxel y de la imagen.

15
14 янв. La respuesta se da scraimer 14 jan. 2009-01-14 12:47 '09 a las 12:47 2009-01-14 12:47

jQuery offset () recibirá las coordenadas actuales del primer elemento o establecerá las coordenadas de cada elemento en el conjunto de elementos coincidentes en relación con el documento.

13
18 авг. respuesta dada por akauppi 18 ago. 2010-08-18 17:43 '10 a las 17:43 2010-08-18 17:43

En cuanto a algo como esto, pasar el identificador del elemento, y devolverá la izquierda o la parte superior, podemos combinarlos:

1) encontrar a la izquierda

 function findLeft(element) { var rec = document.getElementById(element).getBoundingClientRect(); return rec.left + window.scrollX; } //call it like findLeft('#header'); 

2) encontrar la parte superior

 function findTop(element) { var rec = document.getElementById(element).getBoundingClientRect(); return rec.top + window.scrollY; } //call it like findTop('#header'); 

o 3) encontrar la izquierda y la parte superior juntas

 function findTopLeft(element) { var rec = document.getElementById(element).getBoundingClientRect(); return {top: rec.top + window.scrollY, left: rec.left + window.scrollX}; } //call it like findTopLeft('#header'); 
11
22 мая '17 в 16:09 2017-05-22 16:09 La respuesta es dada por Alireza el 22 de mayo de 17 a las 4:09 de 2017-05-05 16:09

Acepté la respuesta @meouw agregada a clientLeft, que permite el uso del borde, y luego creé tres versiones:

getAbsoluteOffsetFromBody: similar a @meouw, obtiene una posición absoluta con respecto al elemento del cuerpo o html del documento (según el modo de peculiaridades)

getAbsoluteOffsetFromGivenElement: devuelve la posición absoluta relativa al elemento dado (relativeEl). Tenga en cuenta que este elemento debe contener un elemento el, de lo contrario se comportará de la misma manera que getAbsoluteOffsetFromBody. Esto es útil si tiene dos elementos contenidos en otro elemento (conocido) (no necesariamente varios nodos en el árbol de nodos) y desea que sean iguales.

getAbsoluteOffsetFromRelative: devuelve una posición absoluta con respecto al primer elemento padre con la posición: relative. Esto es similar a getAbsoluteOffsetFromGivenElement por el mismo motivo, pero solo lo será hasta el primer elemento coincidente.

 getAbsoluteOffsetFromBody = function( el ) { // finds the offset of el from the body or html element var _x = 0; var _y = 0; while( el  !isNaN( el.offsetLeft )  !isNaN( el.offsetTop ) ) { _x += el.offsetLeft - el.scrollLeft + el.clientLeft; _y += el.offsetTop - el.scrollTop + el.clientTop; el = el.offsetParent; } return { top: _y, left: _x }; } getAbsoluteOffsetFromGivenElement = function( el, relativeEl ) { // finds the offset of el from relativeEl var _x = 0; var _y = 0; while( el  el != relativeEl  !isNaN( el.offsetLeft )  !isNaN( el.offsetTop ) ) { _x += el.offsetLeft - el.scrollLeft + el.clientLeft; _y += el.offsetTop - el.scrollTop + el.clientTop; el = el.offsetParent; } return { top: _y, left: _x }; } getAbsoluteOffsetFromRelative = function( el ) { // finds the offset of el from the first parent with position: relative var _x = 0; var _y = 0; while( el  !isNaN( el.offsetLeft )  !isNaN( el.offsetTop ) ) { _x += el.offsetLeft - el.scrollLeft + el.clientLeft; _y += el.offsetTop - el.scrollTop + el.clientTop; el = el.offsetParent; if (el != null) { if (getComputedStyle !== 'undefined') valString = getComputedStyle(el, null).getPropertyValue('position'); else valString = el.currentStyle['position']; if (valString === "relative") el = null; } } return { top: _y, left: _x }; } 

Si aún tiene problemas, especialmente problemas relacionados con el desplazamiento, puede probar http://www.greywyvern.com/?post=331 : noté al menos un código cuestionable en getStyle, que debería ser bueno si los navegadores Se comportará, pero no comprobará todo lo demás.

7
01 дек. Respuesta dada por James Carlyle-Clarke 01 de diciembre 2015-12-01 10:24 '15 a las 10:24 AM 2015-12-01 10:24

Si usa jQuery, el complemento de tamaño es excelente y le permite especificar exactamente lo que desea.

por ejemplo

Posición relativa, posición absoluta, posición absoluta sin relleno, con relleno ...

Vamos, digamos que puedes hacer mucho con eso.

Además, el bono de uso de jQuery es un tamaño de archivo fácil y fácil de usar, después de lo cual no volverá a JavaScript sin él.

7
14 янв. respuesta dada por John_ 14 de enero 2009-01-14 13:24 '09 a las 13:24 2009-01-14 13:24

Este es el mejor código que logré crear (funciona en iframe, en contraste con jQuery offset ()). Parece que el webkit tiene un comportamiento ligeramente diferente.

Basado en los comentarios de meouw:

 function getOffset( el ) { var _x = 0; var _y = 0; while( el  !isNaN( el.offsetLeft )  !isNaN( el.offsetTop ) ) { _x += el.offsetLeft - el.scrollLeft; _y += el.offsetTop - el.scrollTop; // chrome/safari if ($.browser.webkit) { el = el.parentNode; } else { // firefox/IE el = el.offsetParent; } } return { top: _y, left: _x }; } 
6
10 сент. Responder Ron Reiter sep 10 2011-09-10 20:05 '11 a las 20:05 2011-09-10 20:05

Si está utilizando jQuery, esta puede ser una solución simple:

 <script> var el = $("#element"); var position = el.position(); console.log( "left: " + position.left + ", top: " + position.top ); </script> 
6
16 апр. Respuesta dada por iMad el 16 de abril. 2013-04-16 07:56 '13 a las 7:56 2013-04-16 07:56

El enfoque más limpio que he encontrado es una versión simplificada del método utilizado por jQuery offset . Como algunas otras respuestas, comienza con getBoundingClientRect ; luego utiliza window y documentElement para establecer la posición de desplazamiento, así como elementos como el margen en el body (a menudo por defecto).

 var rect = el.getBoundingClientRect(); var docEl = document.documentElement; var rectTop = rect.top + window.pageYOffset - docEl.clientTop; var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft; 

 div { width: 100px; height: 100px; background-color: red; border: 1px solid black; } #rel { position: relative; left: 10px; top: 10px; } #abs { position: absolute; top: 250px; left: 250px; } 
4
04 нояб. Respuesta dada por James Montagne el 4 de noviembre. 2014-11-04 17:17 '14 a las 17:17 2014-11-04 17:17

La diferencia entre lo pequeño y lo pequeño.

 function getPosition( el ) { var x = 0; var y = 0; while( el  !isNaN( el.offsetLeft )  !isNaN( el.offsetTop ) ) { x += el.offsetLeft - el.scrollLeft; y += el.offsetTop - el.scrollTop; el = el.offsetParent; } return { top: y, left: x }; } 

Ver coordenadas de ejemplo: http://javascript.info/tutorial/coordinates

4
25 авг. La respuesta se da KingRider 25 ago. 2016-08-25 18:44 '16 a las 18:44 2016-08-25 18:44

Lo hice para que fuera compatible con los navegadores más antiguos.

 // For really old browser or incompatible ones function getOffsetSum(elem) { var top = 0, left = 0, bottom = 0, right = 0 var width = elem.offsetWidth; var height = elem.offsetHeight; while (elem) { top += elem.offsetTop; left += elem.offsetLeft; elem = elem.offsetParent; } right = left + width; bottom = top + height; return { top: top, left: left, bottom: bottom, right: right, } } function getOffsetRect(elem) { var box = elem.getBoundingClientRect(); var body = document.body; var docElem = document.documentElement; var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop; var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft; var clientTop = docElem.clientTop; var clientLeft = docElem.clientLeft; var top = box.top + scrollTop - clientTop; var left = box.left + scrollLeft - clientLeft; var bottom = top + (box.bottom - box.top); var right = left + (box.right - box.left); return { top: Math.round(top), left: Math.round(left), bottom: Math.round(bottom), right: Math.round(right), } } function getOffset(elem) { if (elem) { if (elem.getBoundingClientRect) { return getOffsetRect(elem); } else { // old browser return getOffsetSum(elem); } } else return null; } 

Lea más sobre coordenadas en JavaScript aquí: http://javascript.info/tutorial/coordinates

3
15 марта '15 в 15:11 2015-03-15 15:11 Respondió a Bojan Kseneman el 15 de marzo de 2015 a las 15:11 2015-03-15 15:11

Solo pensé que yo también lo tiraría.
No pude comprobarlo en navegadores antiguos, pero funciona en la última versión 3. :)

 Element.prototype.getOffsetTop = function() { return ( this.parentElement )? this.offsetTop + this.parentElement.getOffsetTop(): this.offsetTop; }; Element.prototype.getOffsetLeft = function() { return ( this.parentElement )? this.offsetLeft + this.parentElement.getOffsetLeft(): this.offsetLeft; }; Element.prototype.getOffset = function() { return {'left':this.getOffsetLeft(),'top':this.getOffsetTop()}; }; 
2
12 окт. Responder Duncan 12 de octubre. 2014-10-12 13:57 '14 a las 13:57 2014-10-12 13:57

He utilizado con éxito la solución Andy E para colocar el bootstrap 2 según el enlace en la fila de la tabla en la que el usuario hace clic. La página es la página de Tapestry 5, y el javascript siguiente se importa a la clase de página java.

Javascript:

 function setLinkPosition(clientId){ var bodyRect = document.body.getBoundingClientRect(), elemRect = clientId.getBoundingClientRect(), offset = elemRect.top - bodyRect.top; offset = offset + 20; $('#serviceLineModal').css("top", offset); 

}

Mi código modal:

 <div id="serviceLineModal" class="modal hide fade add-absolute-position" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top:50%;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <t:zone t:id="modalZone" id="modalZone"> <p>You selected service line number: ${serviceLineNumberSelected}</p> </t:zone> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <!-- <button class="btn btn-primary">Save changes</button> --> </div> 

Enlace en el bucle:

 <t:loop source="servicesToDisplay" value="service" encoder="encoder"> <tr style="border-right: 1px solid black;"> <td style="white-space:nowrap;" class="add-padding-left-and-right no-border"> <at:type="eventLink" t:event="serviceLineNumberSelected" t:context="service.serviceLineNumber" t:zone="pageZone" t:clientId="modalLink${service.serviceLineNumber}" onmouseover="setLinkPosition(this);"> <i class="icon-chevron-down"></i> <!-- ${service.serviceLineNumber} --> </a> </td> 

Y el código de Java en la clase de página:

 void onServiceLineNumberSelected(String number){ checkForNullSession(); serviceLineNumberSelected = number; addOpenServiceLineDialogCommand(); ajaxResponseRenderer.addRender(modalZone); } protected void addOpenServiceLineDialogCommand() { ajaxResponseRenderer.addCallback(new JavaScriptCallback() { @Override public void run(JavaScriptSupport javascriptSupport) { javascriptSupport.addScript("$('#serviceLineModal').modal('show');"); } }); } 

Espero que esto ayude a alguien, este post ayudado.

2
23 окт. Respuesta dada por Mark Espinoza el 23 de octubre. 2014-10-23 18:02 '14 a las 18:02 2014-10-23 18:02

Después de mucha investigación y pruebas, esto parece funcionar.

 function getPosition(e) { var isNotFirefox = (navigator.userAgent.toLowerCase().indexOf('firefox') == -1); var x = 0, y = 0; while (e) { x += e.offsetLeft - e.scrollLeft + (isNotFirefox ? e.clientLeft : 0); y += e.offsetTop - e.scrollTop + (isNotFirefox ? e.clientTop : 0); e = e.offsetParent; } return { x: x + window.scrollX, y: y + window.scrollY }; } 

consulte http://jsbin.com/xuvovalifo/edit?html,js,output

1
17 июня '15 в 23:48 2015-06-17 23:48 la respuesta se da kernowcode el 17 de junio de 2015 a las 23:48 2015-06-17 23:48

Dado que los diferentes navegadores son visualización de bordes, sangrías, márgenes, etc. diferente Escribí una pequeña función para obtener las posiciones superior e izquierda de un elemento específico en cada elemento raíz que desee en el tamaño exacto:

 function getTop(root, offset) { var rootRect = root.getBoundingClientRect(); var offsetRect = offset.getBoundingClientRect(); return offsetRect.top - rootRect.top; } 

Para obtener la posición izquierda, debe devolver:

  return offsetRect.left - rootRect.left; 
0
08 янв. la respuesta es dada samadadi 08 de enero 2015-01-08 20:42 '15 a las 20:42 2015-01-08 20:42

Aunque es probable que se pierda en el corazón de tantas respuestas, las mejores soluciones aquí no funcionan para mí.
Por lo que pude ver, ninguna de las otras respuestas ayudaría.

<B> Situación:
En la página HTML5, tenía un menú que era un elemento de navegación dentro del título (no un título, sino un título en otro elemento).
Quería que el sistema de navegación se mantuviera en la parte superior tan pronto como el usuario lo recorriera, pero antes de eso el título estaba en una posición absoluta (para poder imponer algo más).
Las soluciones anteriores nunca llevaron a un cambio, porque .offsetTop no iba a cambiar, porque era un elemento con posicionamiento absoluto. Además, la propiedad .scrollTop era solo la parte superior del elemento superior ..., es decir, 0 y siempre habría 0.
Cualquier prueba que realicé usando estos dos (y lo mismo con los resultados de getBoundingClientRect) no me diría que la parte superior de la barra de navegación alguna vez se desplazó a la parte superior de la página que estaba viendo (nuevamente, como se informó en la consola, simplemente se mantuvieron los mismos números cuando sucedió el desplazamiento).

Solucion
Solución para mí usada

 window.visualViewport.pageTop 

El valor de la propiedad pageTop refleja la sección visible de la pantalla, por lo que le permite rastrear dónde pertenece el elemento a los bordes del área de visualización.

Tal vez no sea necesario decir que, en cualquier momento en el que estoy involucrado en el desplazamiento, espero usar esta solución para responder de manera programática al movimiento de elementos desplazables.
Espero que esto ayude a alguien más.

0
24 окт. La respuesta se da MER 24 oct. 2017-10-24 22:23 '17 a las 10:23 pm 2017-10-24 22:23

Otras preguntas sobre las etiquetas o Haz una pregunta