我需要获取 DOM 元素的 X、Y 坐标（相对于文档的顶部/左侧）。我找不到任何可以提供这些的插件或 jQuery 属性或方法。我可以获取 DOM 元素的顶部和左侧，但这可以相对于其当前容器/父元素或文档。
DOM 对象的 jQuery xy 文档坐标
IT技术
javascript
jquery
user-interface
location
2021-02-18 06:46:39
3个回答
您可以使用Dimensions插件[已弃用...包含在 jQuery 1.3.2+ 中]
offset()
获取第一个匹配元素相对于文档的当前偏移量，以像素为单位。position()
获取元素相对于其偏移父元素的顶部和左侧位置。
知道这一点，那就很容易了...（使用我的小svg 项目作为示例页面）
var x = $("#wrapper2").offset().left;
var y = $("#wrapper2").offset().top;
console.log('x: ' + x + ' y: ' + y);
输出：
x: 53 y: 177
希望它有助于你正在寻找的东西。
这是 offset() 和 position() 的图像
使用X 射线
使用Web Developer工具栏
我的解决方案是一个带有“解决方法”的插件 :+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);
该偏移功能会为你做的。
这是他们给出的例子：
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );