我想知道如何在JavaScript中获取img和div等HTML元素的X和Y位置。
当前回答
正确的方法是使用element.getBoundingClientRect（）：
var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);
Internet Explorer一直支持这一点，只要您可能关心，它最终在CSSOM视图中被标准化。 所有其他浏览器早就采用了它。
一些浏览器还返回高度和宽度财产，尽管这是非标准的。如果您担心较旧的浏览器兼容性，请检查此答案的修订版，以获得优化的降级实现。
element.getBoundingClientRect（）返回的值与视口相关。如果需要相对于另一个元素使用，只需从另一个矩形中减去一个矩形即可：
var bodyRect = document.body.getBoundingClientRect(),
elemRect = element.getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
alert('Element is ' + offset + ' vertical pixels from <body>');
其他回答
我想我也会把这个扔出去。我还不能在旧版浏览器中测试它，但它在前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()};
};
这很简单，在JS中有两行：
var elem = document.getElementById("id");
alert(elem.getBoundingClientRect());
我成功地使用Andy E的解决方案，根据用户单击的表行中的链接来定位引导2模式。该页面是Tapestry 5页面，下面的javascript被导入到java页面类中。
javascript代码：
function setLinkPosition(clientId){
var bodyRect = document.body.getBoundingClientRect(),
elemRect = clientId.getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
offset = offset + 20;
$('#serviceLineModal').css("top", offset);
}
我的模式代码：
<div id="serviceLineModal" class="modal hide fade add-absolute-position" data-backdrop="static"
tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top:50%;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<t:zone t:id="modalZone" id="modalZone">
<p>You selected service line number: ${serviceLineNumberSelected}</p>
</t:zone>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<!-- <button class="btn btn-primary">Save changes</button> -->
</div>
循环中的链接：
<t:loop source="servicesToDisplay" value="service" encoder="encoder">
<tr style="border-right: 1px solid black;">
<td style="white-space:nowrap;" class="add-padding-left-and-right no-border">
<a t:type="eventLink" t:event="serviceLineNumberSelected" t:context="service.serviceLineNumber"
t:zone="pageZone" t:clientId="modalLink${service.serviceLineNumber}"
onmouseover="setLinkPosition(this);">
<i class="icon-chevron-down"></i> <!-- ${service.serviceLineNumber} -->
</a>
</td>
页面类中的java代码：
void onServiceLineNumberSelected(String number){
checkForNullSession();
serviceLineNumberSelected = number;
addOpenServiceLineDialogCommand();
ajaxResponseRenderer.addRender(modalZone);
}
protected void addOpenServiceLineDialogCommand() {
ajaxResponseRenderer.addCallback(new JavaScriptCallback() {
@Override
public void run(JavaScriptSupport javascriptSupport) {
javascriptSupport.addScript("$('#serviceLineModal').modal('show');");
}
});
}
希望这对某人有所帮助，这篇文章帮了大忙。
获取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
如果使用jQuery，维度插件非常出色，可以让您精确地指定所需内容。
e.g.
相对位置，绝对位置，无填充的绝对位置，有填充。。。
继续下去，让我们说你可以用它做很多事情。
另外，使用jQuery的好处是它的文件大小很小，使用起来很方便，以后如果没有它，就不会返回JavaScript。
