我想知道如何在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>');

其他回答

正确的方法是使用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>');

jQuery.offset()将获取第一个元素的当前坐标,或者设置匹配元素集合中每个元素相对于文档的坐标。

使用JavaScript框架可能会更好地为您服务,该框架具有以独立于浏览器的方式返回此类信息(以及更多信息!)的功能。以下是一些:

原型jQuery框架YUI(雅虎)

使用这些框架,您可以执行以下操作:$('id-of-img').top以获得图像的y像素坐标。

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

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

我发现的最干净的方法是jQuery的偏移所使用的技术的简化版本。与其他一些答案类似,它从getBoundingClientRect开始;然后,它使用窗口和documentElement来调整滚动位置以及正文上的边距(通常是默认值)。

var rect = el.getBoundingClientRect();
var docEl = document.documentElement;

var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft;

var els=文档.getElementsByTagName(“div”);var docEl=文档.documentElement;对于(var i=0;i<els.length;i++){var rect=els[i].getBoundingClientRect();var rectTop=rect.top+window.pageYOffset-docEl.clientTop;var rectLeft=rect.left+window.pageXOffset-docEl.clientLeft;els[i].innerHTML=“<b>”+rectLeft+“,”+rectTop+“</b>”;}第二部分{宽度:100px;高度:100px;背景色:红色;边框:1px实心黑色;}#相关{位置:相对;左:10px;顶部:10px;}#绝对值{位置:绝对;顶部:250px;左:250px;}<div id=“rel”></div><div id=“abs”></div><div></div>