javascript - objects - Encontrar la posición del elemento relativo al documento

llamar archivo javascript desde html

Question

¿Cuál es la forma más fácil de determinar una posición de los elementos relativa a la ventana del documento / cuerpo / navegador?

En este momento estoy usando .offsetLeft/offsetTop , pero este método solo te da la posición relativa al elemento padre, por lo que debes determinar cuántos padres para el elemento del cuerpo, para conocer la posición relativa del cuerpo / ventana del navegador / posición del documento.

Este método también es engorroso.

Answer 1

Para aquellos que desean obtener las coordenadas xey de varias posiciones de un elemento, relativas al documento.

const getCoords = (element, position) => {
  const { top, left, width, height } = element.getBoundingClientRect();
  let point;
  switch (position) {
    case "top left":
      point = {
        x: left + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "top center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "top right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "center left":
      point = {
        x: left + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "center right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "bottom left":
      point = {
        x: left + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
    case "bottom center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
    case "bottom right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
  }
  return point;
};

Uso

• getCoords(document.querySelector(''selector''), ''center'')

• getCoords(document.querySelector(''selector''), ''bottom right'')

• getCoords(document.querySelector(''selector''), ''top center'')

Answer 2

Probado en IE 11, Chrome 62, Firefox 56, Edge 38:

var box = domElement.getBoundingClientRect();
var offsetTop = Math.floor(box.top && box.top || box.y && box.y || 0);

Use left / x para offsetLeft.

Answer 3

Puede obtener la parte superior e izquierda sin cruzar DOM de esta manera:

function getCoords(elem) { // crossbrowser version
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docEl = document.documentElement;

    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;

    var clientTop = docEl.clientTop || body.clientTop || 0;
    var clientLeft = docEl.clientLeft || body.clientLeft || 0;

    var top  = box.top +  scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

    return { top: Math.round(top), left: Math.round(left) };
}

Answer 4

Puede recorrer el offsetParent hasta el nivel superior del DOM.

function getOffsetLeft( elem )
{
    var offsetLeft = 0;
    do {
      if ( !isNaN( elem.offsetLeft ) )
      {
          offsetLeft += elem.offsetLeft;
      }
    } while( elem = elem.offsetParent );
    return offsetLeft;
}

Answer 5

Puede usar element.getBoundingClientRect() para recuperar la posición del elemento relativo a la ventana gráfica.

A continuación, utilice document.documentElement.scrollTop para calcular el desplazamiento de la ventana gráfica.

La suma de los dos dará la posición del elemento relativa al documento:

element.getBoundingClientRect().top + document.documentElement.scrollTop

Answer 6

Si no te importa usar jQuery, entonces puedes usar la función offset() . Consulte la documentation si desea obtener más información sobre esta función.

Answer 7

Sugiero usar

element.getBoundingClientRect()

como se propone here lugar del cálculo de compensación manual a través de offsetLeft , offsetTop y offsetParent . como se propone here En algunas circunstancias * el recorrido manual produce resultados no válidos. Vea este Plunker: http://plnkr.co/pC8Kgj

* Cuando el elemento está dentro de un elemento primario desplazable con posicionamiento estático (= predeterminado).

Answer 8

http://www.quirksmode.org/js/findpos.html Explica la mejor manera de hacerlo, en general, está en el camino correcto, tiene que encontrar los desplazamientos y recorrer el árbol de los padres.

Answer 9

document-offset ( script de terceros ) es interesante y parece aprovechar los enfoques de las otras respuestas aquí.

Ejemplo:

var offset = require(''document-offset'')
var target = document.getElementById(''target'')
console.log(offset(target))
// => {top: 69, left: 108}