复制html元素,查找HTML元素的JavaScript的X / Y [复制](Find X/Y of an HTML

这个问题已经在这里有一个答案：检索HTML元素的位置(X，Y) 25分的答案

我怎样才能找到XY从JavaScript的HTML元素(DIV)的坐标，如果他们没有明确设定？

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:

这可以根据浏览器和版本会非常棘手。 我会建议使用jQuery的和位置的插件。

Answer 3:

您可以使用库比如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];

}

Answer 4:

对于它的价值，这里有一个递归版本：

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/

文章来源: Find X/Y of an HTML element with JavaScript [duplicate]