检索HTML元素的位置（X，Y）

最新推荐文章于 2023-01-14 09:19:20 发布

p15097962069

最新推荐文章于 2023-01-14 09:19:20 发布

阅读量574

点赞数

文章标签： javascript html css dom position

原文链接：https://ru.sofbug.com/question/1r5Y

版权

我想知道如何获取JavaScript中img和div等HTML元素的X和Y位置。

#1楼

正确的方法是使用element.getBoundingClientRect() ：

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

Internet Explorer自从您很可能就一直在支持此功能，并且最终在CSSOM Views中对其进行了标准化。其他所有浏览器在很久以前就采用了它。

一些浏览器还返回height和width属性，尽管这是非标准的。如果您担心与旧版浏览器的兼容性，请查看此答案的修订版以实现优化的降级实现。

element.getBoundingClientRect()返回的值是相对于视口的。如果您需要相对于另一个元素的矩形，只需从另一个矩形中减去一个矩形：

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');

#2楼

如果您使用的是jQuery，这可能是一个简单的解决方案：

<script>
  var el = $("#element");
  var position = el.position();
  console.log( "left: " + position.left + ", top: " + position.top );
</script>

#3楼

在不使用递归功能的情况下，有效地检索相对于页面的位置：（还包括IE）

var element = document.getElementById('elementId'); //replace elementId with your element's Id.
var rect = element.getBoundingClientRect();
var elementLeft,elementTop; //x and y
var scrollTop = document.documentElement.scrollTop?
                document.documentElement.scrollTop:document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft?                   
                 document.documentElement.scrollLeft:document.body.scrollLeft;
elementTop = rect.top+scrollTop;
elementLeft = rect.left+scrollLeft;

#4楼

只是以为我也会把它扔在那里。
我无法在较旧的浏览器中对其进行测试，但是它可以在前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()};
};

#5楼

我成功地使用了Andy E的解决方案来根据用户单击表行中的链接来定位bootstrap 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: