用JavaScript查找HTML元素的X / Y

如果没有明确设置，我如何从JavaScript中findHTML元素（DIV）的XY坐标？

Answer 1

以下是我如何做到这一点：

// 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 2

这可能是棘手的，取决于浏览器和版本。 我会build议使用jQuery和位置插件。

Answer 3

您可以使用Prototype或jQuery等库，也可以使用这个方便的function ：

它返回一个数组。

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

Answer 4

对于它的价值，这是一个recursion版本：

 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

您可以将两个属性添加到Element.prototype以获取任何元素的顶部/左侧。

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

下面是一个演示比较结果jQuery的offset().top和。 .left ： http : //jsfiddle.net/ThinkingStiff/3G7EZ/

Answer 6

我不确定你需要什么，而这些东西总是相对的（屏幕，窗口，文档）。 但是，当我需要弄清楚，我发现这个网站很有帮助： http : //www.mattkruse.com/javascript/anchorposition/source.html

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