获取元素位置，宽高属性（offset...，client...）和滚动条相关方法（page...）

@Planner

已于 2023-07-29 14:14:49 修改

阅读量427

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2023-07-13 02:29:23 首次发布

本文链接：https://blog.csdn.net/m0_68320270/article/details/131693370

版权

本章是自己学习过程中的笔记，总结

一、offsetLeft/offsetTop

二、offsetWidth/offserHeight

三、clientLeft/clientRight

四、clientWidth/clientHeight

五、pageXOffset/pageYOffset

六、scrollBy/scrollTo

七、扩展

一、offsetLeft/offsetTop

属性offsetLeft/offserTop提供相对于父元素（有position属性的父级）左上角x/y的位置，结合图片更容易理解。

<main style="position: relative" id="main">
  <article>
    <div id="example" style="position: absolute; left: 180px; top: 180px">...</div>
  </article>
</main>
<script>
  alert(example.offsetParent.id); // main
  alert(example.offsetLeft); // 180（注意：这是一个数字，不是字符串 "180px"）
  alert(example.offsetTop); // 180
</script>

二、offsetWidth/offserHeight

现在，让我们继续关注元素本身。

这两个属性是最简单的。它们提供了元素的“外部” width/height。或者，换句话说，它的完整大小（包括边框）。

三、clientLeft/clientRight

在元素内部，我们有边框（border）。

为了测量它们，可以使用 clientTop 和 clientLeft。

……但准确地说 —— 这些属性不是边框的 width/height，而是内侧与外侧的相对坐标。

有什么区别？

当文档从右到左显示（操作系统为阿拉伯语或希伯来语）时，影响就显现出来了。此时滚动条不在右边，而是在左边，此时 clientLeft 则包含了滚动条的宽度。

在这种情况下，clientLeft 的值将不是 25，而是加上滚动条的宽度 25 + 16 = 41。

四、clientWidth/clientHeight

这些属性提供了元素边框内区域的大小。

它们包括了 “content width” 和 “padding”，但不包括滚动条宽度（scrollbar）：

五、pageXOffset/pageYOffset

对于scrollLeft/scrollTop、scrollWidth/scrollHeight方法不做过多说明，因为对于文档滚动，在大多数浏览器中，我们可以使用 document.documentElement.scrollLeft/scrollTop，但在较旧的基于 WebKit 的浏览器中则不行，例如在 Safari（bug 5991）中，我们应该使用 document.body 而不是 document.documentElement。

幸运的是，我们根本不必记住这些特性，因为我们可以从 window.pageXOffset/pageYOffset 中获取页面当前滚动信息：

alert('当前已从顶部滚动：' + window.pageYOffset);
alert('当前已从左侧滚动：' + window.pageXOffset);

这些属性是只读的。

六、scrollBy/scrollTo

方法 scrollBy(x,y) 将页面滚动至 相对于当前位置的 (x, y) 位置。例如，scrollBy(0,10) 会将页面向下滚动 10px。

方法 scrollTo(pageX,pageY) 将页面滚动至 绝对坐标，使得可见部分的左上角具有相对于文档左上角的坐标 (pageX, pageY)。就像设置了 scrollLeft/scrollTop 一样。

要滚动到最开始，我们可以使用 scrollTo(0,0)。

七、扩展

1. e.pageX/pageY(参照点：网页的左上角)、e.clientX/clientY(参照点：浏览器内容区域左上角)、e.offsetX/offsetY（参考点：鼠标点击位置相对于触发事件对象的水平/垂直距离）、e.screenX/screenY(参照点：电脑屏幕左上角)

注意：当A盒子嵌套B盒子时,在B盒子的e.offsetX并不等于（e.clientX - B盒子.offsetLeft）,可能有点绕，看代码吧！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .a {
            position: relative;
            width: 350px;
            height: 350px;
            border: 5px solid #ccc;
            /* margin: 40px; */
        }

        .b {
            position: absolute;
            left: 125px;
            top: 125px;
            width: 100px;
            height: 100px;
            border: 5px solid #e68df4a5
        }
    </style>
</head>

<body>
    <div class="a">
        <div class="b"></div>
    </div>

    <script>
        let divA = document.querySelector('.a')
        let divB = document.querySelector('.b')
        let divBOffsetLeft = divB.offsetLeft
        console.log('离父盒子的距离',divBOffsetLeft)

        divB.addEventListener('click', function (e) {
            let offsetX = e.offsetX
            let clientX = e.clientX
            console.log('offsetX:', offsetX, ' clientX:', clientX,)
        })
    </script>
</body>

</html>

输出结果：

离父盒子的距离 125
offsetX: 36 clientX: 170

这是因为offsetLeft的参考点是父盒子，而clientX的参考点是浏览器内容区域左上角，只有当两个盒子没有margin，padding，border样式时，才满足：e.offsetX = e.clientX - 子盒子.offsetLeft

2.元素坐标：element.getBoundingClientRect()

主要的 DOMRect 属性：