jQuery的xy文档坐标的DOM对象

我需要获取DOM元素的X，Y坐标（相对于文档的顶部/左侧）。 我找不到任何插件或jQuery属性或方法，可以给我这些。 我可以获取DOM元素的顶部和左侧，但是可以相对于其当前的容器/父级或文档。

Answer 1

您可以使用尺寸插件 [已弃用…包含在jQuery 1.3.2 +]

抵消（）
获取第一个匹配元素相对于文档的当前偏移量（以像素为单位）。

位置（）
获取元素相对于其偏移父元素的顶部和左侧位置。

知道这一点，那么很容易…（使用我的小svg项目 为例 ）

var x = $("#wrapper2").offset().left; var y = $("#wrapper2").offset().top; console.log('x: ' + x + ' y: ' + y); 

输出：

 x: 53 y: 177 

希望它有助于你在找什么。

这里是offset（）和position（）的图像

使用XRay

使用Web Developer工具栏

Answer 2

我的解决scheme是一个插件“解决方法”：+ D。 但工程！

 jQuery.fn.getPos = function(){ var o = this[0]; var left = 0, top = 0, parentNode = null, offsetParent = null; offsetParent = o.offsetParent; var original = o; var el = o; while (el.parentNode != null) { el = el.parentNode; if (el.offsetParent != null) { var considerScroll = true; if (window.opera) { if (el == original.parentNode || el.nodeName == "TR") { considerScroll = false; } } if (considerScroll) { if (el.scrollTop && el.scrollTop > 0) { top -= el.scrollTop; } if (el.scrollLeft && el.scrollLeft > 0) { left -= el.scrollLeft; } } } if (el == offsetParent) { left += o.offsetLeft; if (el.clientLeft && el.nodeName != "TABLE") { left += el.clientLeft; } top += o.offsetTop; if (el.clientTop && el.nodeName != "TABLE") { top += el.clientTop; } o = el; if (o.offsetParent == null) { if (o.offsetLeft) { left += o.offsetLeft; } if (o.offsetTop) { top += o.offsetTop; } } offsetParent = o.offsetParent; } } return { left: left, top: top }; }; 

用法：

 var p = $("#wrapper2").getPos(); alert("top:"+p.top+"; left:"+p.left); 

Answer 3

偏移function将为您做到这一点。

这是他们给的例子：

 var p = $("p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top );