javascript - getelementsbytagname

Encuentra X/Y de un elemento HTML con JavaScript

Question

Esta pregunta ya tiene una respuesta aquí:

• Recuperar la posición (X, Y) de un elemento HTML 22 respuestas

¿Cómo puedo encontrar las coordenadas XY de un elemento HTML (DIV) de JavaScript si no se establecieron explícitamente?

Answer 1

Eso puede ser complicado según el navegador y la versión. Sugiero usar jQuery y el plugin de posiciones.

Answer 2

No estoy seguro de lo que necesita, y esas cosas siempre son relativas (pantalla, ventana, documento). Pero cuando tuve que resolverlo, encontré este sitio útil: http://www.mattkruse.com/javascript/anchorposition/source.html

Y también encontré que el complemento de información sobre herramientas que alguien hizo para jQuery tenía todo tipo de información interesante para x, y trucos de posicionamiento (mira su clase de ventana gráfica y el soporte subyacente que proporciona jQuery). http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Answer 3

Así es como lo hago:

// Based on: http://www.quirksmode.org/js/findpos.html
var getCumulativeOffset = function (obj) {
    var left, top;
    left = top = 0;
    if (obj.offsetParent) {
        do {
            left += obj.offsetLeft;
            top  += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    return {
        x : left,
        y : top
    };
};

Answer 4

Por lo que vale, aquí hay una versión recursiva:

function findPos(element) {
  if (element) {
    var parentPos = findPos(element.offsetParent);
    return [
      parentPos.X + element.offsetLeft,
      parentPos.Y + element.offsetTop
    ];
  } else {
    return [0,0];
  }
}

Answer 5

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

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

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

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

Answer 6

Puede usar una biblioteca como Prototype o jQuery, o puede usar esta práctica función :

Devuelve una matriz.

myPos = findPos(document.getElementById(''something''))
x = myPos[0]
y = myPos[1]

function findPos(obj) {
  var curleft = curtop = 0;
  if (obj.offsetParent) {
    curleft = obj.offsetLeft
    curtop = obj.offsetTop
    while (obj = obj.offsetParent) {
      curleft += obj.offsetLeft
      curtop += obj.offsetTop
    }
  }
  return [curleft,curtop];
}