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

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

2012-07-09 14:06:24

其他回答

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

2010-08-18 14:43:35

我发现的最干净的方法是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>

2014-11-04 14:17:15

如果页面至少包含任何“DIV”，meouw给出的函数会将“Y”值抛出到当前页面限制之外。为了找到准确的位置，您需要处理offsetParent和parentNode。

尝试以下代码（检查FF2）：


var getAbsPosition = function(el){
    var el2 = el;
    var curtop = 0;
    var curleft = 0;
    if (document.getElementById || document.all) {
        do  {
            curleft += el.offsetLeft-el.scrollLeft;
            curtop += el.offsetTop-el.scrollTop;
            el = el.offsetParent;
            el2 = el2.parentNode;
            while (el2 != el) {
                curleft -= el2.scrollLeft;
                curtop -= el2.scrollTop;
                el2 = el2.parentNode;
            }
        } while (el.offsetParent);

    } else if (document.layers) {
        curtop += el.y;
        curleft += el.x;
    }
    return [curtop, curleft];
};

2010-08-12 20:14:33

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

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

2013-04-16 04:56:33

如果使用jQuery，维度插件非常出色，可以让您精确地指定所需内容。

e.g.

相对位置，绝对位置，无填充的绝对位置，有填充。。。

继续下去，让我们说你可以用它做很多事情。

另外，使用jQuery的好处是它的文件大小很小，使用起来很方便，以后如果没有它，就不会返回JavaScript。

2009-01-14 10:24:21

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

推荐文章

最新文章

标签