Pregunta Recuperar la posición (X, Y) de un elemento HTML


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


1007
2018-01-14 09:35


origen


Respuestas:


El enfoque correcto es usar element.getBoundingClientRect():

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

Internet Explorer lo ha soportado desde que es posible que te importe y finalmente se estandarizó en Vistas de CSSOM. Todos los demás navegadores lo adoptaron hace mucho tiempo.

Algunos navegadores también devuelven propiedades de altura y ancho, aunque esto no es estándar. Si le preocupa la compatibilidad del navegador anterior, consulte las revisiones de esta respuesta para una implementación de degradación optimizada.

Los valores devueltos por element.getBoundingClientRect() son relativos a la ventana gráfica. Si lo necesita en relación con otro elemento, simplemente resta un rectángulo del otro:

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');

1303
2017-07-09 14:06



Las bibliotecas hacen todo lo posible para obtener compensaciones precisas para un elemento.
aquí hay una función simple que hace el trabajo en todas las circunstancias que he probado.

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; 

256
2018-01-14 10:04



Esto funcionó para mí (modificado a partir de la respuesta más votado):

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

Usando esto podemos llamar

getOffset(element).left

o

getOffset(element).top

137
2018-01-29 18:46



Si la página incluye, al menos, cualquier "DIV", la función dada por meouw arroja el valor "Y" más allá de los límites de la página actual. Para encontrar la posición exacta, necesita manejar tanto "offsetParent" como "parentNode" s.

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];
};


29
2017-08-12 20:14



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

Object.defineProperty( Element.prototype, 'documentOffsetTop', {
    get: function () { 
        return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
    }
} );

Object.defineProperty( Element.prototype, 'documentOffsetLeft', {
    get: function () { 
        return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 );
    }
} );

Esto se llama así:

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

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


28
2018-01-14 08:57



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

offsetLeft
offsetTop

Estos especifican la posición del elemento relativo a su elemento primario más cercano que tiene diseño. A este padre a menudo se puede acceder por la propiedad offsetParent.

IE y FF3 tienen

clientLeft
clientTop

Estas propiedades son menos comunes, especifican una posición de elementos con su área de cliente principal (el área acolchada es parte del área del cliente, pero el borde y el margen no).


25
2018-01-14 09:43



Para recuperar la posición relativa a la página de manera eficiente, y sin utilizar una función recursiva: (incluye IE también)

var element = document.getElementById('elementId'); //replace elementId with your element's 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;

21
2017-07-26 01:49



¿Qué tal algo así, al pasar ID del elemento y devolverá la izquierda o la parte superior, también podemos combinarlos:

1) encuentra a la izquierda

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

2) encontrar arriba

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

o 3) encontrar izquierda y arriba juntos

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');

18
2018-05-22 13:09



Puede que te sirva mejor utilizando un marco de JavaScript, que tiene funciones para devolver dicha información (¡y mucho más!) De forma independiente del navegador. Aquí hay algunos:

Con estos marcos, podría hacer algo como: $('id-of-img').top para obtener la coordenada y de píxel de la imagen.


17
2018-01-14 09:47



jQuery .compensar() obtendrá las coordenadas actuales del primer elemento, o establecerá las coordenadas de cada elemento, en el conjunto de elementos coincidentes, relativo al documento.


14
2017-08-18 14:43



si usa jQuery, el plugin dimensioneses excelente y le permite especificar exactamente lo que quiere.

p.ej.

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

Continúa, digamos que hay mucho que puedes hacer con eso.

Además de la ventaja de utilizar jQuery es su tamaño de archivo ligero y fácil de usar, no volverás a JavaScript sin él después.


8
2018-01-14 10:24