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

时间:2020-03-06 15:00:08  来源:igfitidea点击:

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

解决方案

根据浏览器和版本的不同,这可能会很棘手。我建议使用jQuery和positions插件。

我不确定我们需要什么,并且这些东西总是相对的(屏幕,窗口,文档)。但是当我需要弄清楚这一点时,我发现此站点很有帮助:
http://www.mattkruse.com/javascript/anchorposition/source.html

而且我还发现,有人为jQuery制作的工具提示插件对x,y定位技巧有各种有趣的见解(请查看其视口类以及jQuery为此提供的基础支持)。
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

我们可以使用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];
}

这是我的方法:

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