使用JavaScript查找HTML元素的X/Y.

37 html javascript

如果没有明确设置,如何从JavaScript中找到HTML元素(DIV)的XY坐标?

And*_*ges 31

我是这样做的:

// 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
    };
};
Run Code Online (Sandbox Code Playgroud)


pal*_*rse 8

根据浏览器和版本,这可能很棘手.我建议使用jQuery和position插件.

  • 大多数职位插件现在都是jQuery核心的一部分.所以你可以做$(element).offset({relativeTo:"body"}) - 它会给你相对于身体的对象的顶部和左边. (9认同)

Dio*_*ane 5

您可以使用Prototype或jQuery等库,也可以使用这个方便的函数:

它返回一个数组.

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];
}
Run Code Online (Sandbox Code Playgroud)