获取元素位置

最新推荐文章于 2025-09-17 23:02:33 发布

原创最新推荐文章于 2025-09-17 23:02:33 发布 · 636 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

31 篇文章

订阅专栏

最近做了很多获取元素位置的交互，最开始接触的是下面的这些，做了比如网页区域懒加载、一键回到网页顶部等。

为了理解这些属性，我们需要知道HTML元素的实际内容有可能比分配用来容纳内容的盒子更大，因此可能会出现滚动条，内容区域是视口，当实际内容比视口大的时候，需要把元素的滚动条位置考虑进去。

1. clientHeight和clientWidth用于描述元素内尺寸，是指元素内容+内边距大小，不包括边框（IE下实际包括）、外边距、滚动条部分

2. offsetHeight和offsetWidth用于描述元素外尺寸，是指元素内容+内边距+边框，不包括外边距和滚动条部分

3. clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离，也就是左，上边框宽度

4. offsetTop和offsetLeft表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离

5. offsetParent对象是指元素最近的定位（relative,absolute）祖先元素，递归上溯，如果没有祖先元素是定位的话，会返回null

6. scrollWidth和scrollHeight是元素的内容区域加上内边距加上溢出尺寸，当内容正好和内容区域匹配没有溢出时，这些属性与clientWidth和clientHeight相等

7. scrollLeft和scrollTop是指元素滚动条位置，它们是可写的。

直到将其应用到手机端rem时遇到了问题，因为在动态获取手机宽度时过慢，有时在显示出部分内容后才计算出来，导致了二次重绘，页面闪烁的问题。重新在网上寻找到如下答案，才完美解决这个问题。

有一种快速获得网页元素的位置。那就是使用getBoundingClientRect()方法。

它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。
所以，网页元素的相对位置就是
　　var X= this.getBoundingClientRect().left;
　　var Y =this.getBoundingClientRect().top;
再加上滚动距离，就可以得到绝对位置
　　var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
　　var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

目前，IE、Firefox 3.0+、Opera 9.5+都支持该方法，而Firefox 2.x、Safari、Chrome、Konqueror不支持。

最后奉上rem自适应的代码：

<script type="text/javascript">
(function() {
    var b = document.documentElement,
    a = function() {
        var a = b.getBoundingClientRect().width;
        var a = a < 640 ? a : 640;
        b.style.fontSize =( .0375 * a) + "px";
    },
    c = null;
    window.addEventListener("resize",
    function() {
        clearTimeout(c);
        c = setTimeout(a, 300);
    });
    a();
})();
</script>