我想知道如何在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>
其他回答
要获得元素的总偏移量，可以递归地对所有父偏移量求和：
function getParentOffset(el): number {
if (el.offsetParent) {
return el.offsetParent.offsetTop + getParentOffset(el.offsetParent);
} else {
return 0;
}
}
使用该实用函数，dom元素的总顶部偏移量为：
el.offsetTop + getParentOffset(el);
您可以将两个财产添加到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像素坐标。
我想我也会把这个扔出去。我还不能在旧版浏览器中测试它，但它在前3名中的最新版本中运行。：）
Element.prototype.getOffsetTop = function() {
return ( this.parentElement )? this.offsetTop + this.parentElement.getOffsetTop(): this.offsetTop;
};
Element.prototype.getOffsetLeft = function() {
return ( this.parentElement )? this.offsetLeft + this.parentElement.getOffsetLeft(): this.offsetLeft;
};
Element.prototype.getOffset = function() {
return {'left':this.getOffsetLeft(),'top':this.getOffsetTop()};
};
我是这样做的，所以它与旧浏览器兼容。
// For really old browser's or incompatible ones
function getOffsetSum(elem) {
var top = 0,
left = 0,
bottom = 0,
right = 0
var width = elem.offsetWidth;
var height = elem.offsetHeight;
while (elem) {
top += elem.offsetTop;
left += elem.offsetLeft;
elem = elem.offsetParent;
}
right = left + width;
bottom = top + height;
return {
top: top,
left: left,
bottom: bottom,
right: right,
}
}
function getOffsetRect(elem) {
var box = elem.getBoundingClientRect();
var body = document.body;
var docElem = document.documentElement;
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop;
var clientLeft = docElem.clientLeft;
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
var bottom = top + (box.bottom - box.top);
var right = left + (box.right - box.left);
return {
top: Math.round(top),
left: Math.round(left),
bottom: Math.round(bottom),
right: Math.round(right),
}
}
function getOffset(elem) {
if (elem) {
if (elem.getBoundingClientRect) {
return getOffsetRect(elem);
} else { // old browser
return getOffsetSum(elem);
}
} else
return null;
}
有关JavaScript中坐标的更多信息，请点击此处：http://javascript.info/tutorial/coordinates
