我想知道如何在JavaScript中获取img和div等HTML元素的X和Y位置。
当前回答
HTML程序，用于显示通过将鼠标拖到元素上，您就复制了它并自己使用它<!DOCTYPE html><html><head><标题>元素的位置</title><!-- scropt获取位置--><script type=“text/javascript”>函数getPositionXY（元素）{var rect=元素.getBoundingClientRect（）；document.getElementById（'text'）.innerHTML='X:'+rect.X+'<br>'+'Y:'+direct.Y；}</script></head><body><p>将鼠标移到文本上</p><div onmouseover=“getPositionXY（this）”>职位：<p id=“text”></p></div></body></html>
其他回答
您可以将两个财产添加到Element.protype中，以获得任何元素的顶部/左侧。
Object.defineProperty( Element.prototype, 'documentOffsetTop', {
get: function () {
return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
}
} );
Object.defineProperty( Element.prototype, 'documentOffsetLeft', {
get: function () {
return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 );
}
} );
这被称为：
var x = document.getElementById( 'myDiv' ).documentOffsetLeft;
下面是一个将结果与jQuery的offset（）.top和.left进行比较的演示：http://jsfiddle.net/ThinkingStiff/3G7EZ/
使用JavaScript框架可能会更好地为您服务，该框架具有以独立于浏览器的方式返回此类信息（以及更多信息！）的功能。以下是一些：
原型jQuery框架YUI（雅虎）
使用这些框架，您可以执行以下操作：$（'id-of-img'）.top以获得图像的y像素坐标。
更新：
递归方法（在我以前的答案中）创建了许多调用堆栈。在这种情况下，我们可以使用while循环来避免递归：
/**
*
* @param {HTMLElement} el
* @return {{top: number, left: number}}
*/
function getDocumentOffsetPosition(el) {
let top = 0, left = 0;
while (el !== null) {
top += el.offsetTop;
left += el.offsetLeft;
el = el.offsetParent;
}
return {top, left};
}
旧答案：
/**
*
* @param {HTMLElement} el
* @return {{top: number, left: number}}
*/
function getDocumentOffsetPosition(el) {
var position = {
top: el.offsetTop,
left: el.offsetLeft
};
if (el.offsetParent) {
var parentPosition = getDocumentOffsetPosition(el.offsetParent);
position.top += parentPosition.top;
position.left += parentPosition.left;
}
return position;
}
感谢Thinkingtiff的回答，这只是另一个版本。
如果您只想在javascript中完成，这里有一些使用getBoundingClientRect（）的单行程序
window.scrollY + document.querySelector('#elementId').getBoundingClientRect().top // Y
window.scrollX + document.querySelector('#elementId').getBoundingClientRect().left // X
第一行将返回offsetTop，比如相对于文档的Y。第二行将返回offsetLeft，比如相对于文档的X。
getBoundingClientRect（）是一个javascript函数，它返回元素相对于窗口视口的位置。
获取div相对于左侧和顶部的位置
var elm = $('#div_id'); //get the div
var posY_top = elm.offset().top; //get the position from top
var posX_left = elm.offset().left; //get the position from left
