前端：常用的获取元素位置与元素尺寸的属性与方法

最新推荐文章于 2024-08-22 17:38:39 发布

一天只码五十行

最新推荐文章于 2024-08-22 17:38:39 发布

阅读量585

点赞数 7

文章标签：前端

本文链接：https://blog.csdn.net/qq_45820271/article/details/137570146

版权

属性/方法	描述
`clientWidth`	返回元素内容区的宽度（不包括滚动条、边框和外边距）。对于`box-sizing: border-box`的元素，包含内边距。
`clientHeight`	返回元素内容区的高度（不包括滚动条、边框和外边距）。对于`box-sizing: border-box`的元素，包含内边距。
`offsetWidth`	返回元素的总宽度，包括内边距和边框，但不包括外边距。
`offsetHeight`	返回元素的总高度，包括内边距和边框，但不包括外边距。
`scrollWidth`	返回元素的完整内容宽度，包括可能超出视口需要滚动才能看见的部分。
`scrollHeight`	返回元素的完整内容高度，包括可能超出视口需要滚动才能看见的部分。
`offsetLeft`	返回元素左边缘到其最近定位父元素左边缘的距离，包括元素的margin。
`offsetTop`	返回元素顶部到其最近定位父元素顶部的距离，包括元素的margin。
`getBoundingClientRect()`	返回一个对象，包含元素各边界相对于视口的位置（`top`, `right`, `bottom`, `left`)以及元素的宽高（`width`, `height`），考虑了滚动、变形和CSS转换的影响。
`scrollTop`	返回元素自身的垂直滚动条位置。
`scrollLeft`	返回元素自身的水平滚动条位置。
`window.innerWidth`	返回浏览器视口内部的宽度，包括滚动条（但滚动条不计入宽度内）。
`window.innerHeight`	返回浏览器视口内部的高度，包括滚动条（但滚动条不计入高度内）。
`window.scrollY`	返回当前视口距离页面顶部的垂直滚动偏移量。等同于`window.pageYOffset`。
`window.scrollX`	返回当前视口距离页面左侧的水平滚动偏移量。等同于`window.pageXOffset`。
`window.screen.width`	返回浏览器窗口所在的整个屏幕的宽度。
`window.screen.height`	返回浏览器窗口所在的整个屏幕的高度。
`document.documentElement.clientWidth`	返回HTML文档元素在视口内的可视宽度，不包括滚动条。
`document.documentElement.clientHeight`	返回HTML文档元素在视口内的可视高度，不包括滚动条

下面有一个简单的示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>啦啦啦</title>
  </head>
  <body>
    <div id="example" class="hidden-scrollbar"></div>
  </body>
  <script>
    const getDomInfos = () => {
      var exampleDiv = document.getElementById("example");

      //元素的内容区域宽度和高度
      console.log("clientWidth:", exampleDiv.clientWidth);
      console.log("clientHeight:", exampleDiv.clientHeight);

      //元素的内边距区域宽度和高度
      console.log("offsetWidth:", exampleDiv.offsetWidth);
      console.log("offsetHeight:", exampleDiv.offsetHeight);

      //元素的滚动区域宽度和高度
      console.log("scrollWidth:", exampleDiv.scrollWidth);
      console.log("scrollHeight:", exampleDiv.scrollHeight);

      //元素与父元素的距离
      console.log("offsetLeft:", exampleDiv.offsetLeft);
      console.log("offsetTop:", exampleDiv.offsetTop);

      //元素的边界矩形，值为一个 DOMRect 对象，具体为bottom, height, left, right, top, width, x, y
      console.log(
        "getBoundingClientRect():",
        exampleDiv.getBoundingClientRect()
      );

      //元素的滚动距离
      console.log("scrollTop:", exampleDiv.scrollTop);
      console.log("scrollLeft:", exampleDiv.scrollLeft);

      //视口的宽度和高度
      console.log("window.innerWidth:", window.innerWidth);
      console.log("window.innerHeight:", window.innerHeight);

      //滚动条的滚动距离
      console.log("window.scrollY:", window.scrollY);
      console.log("window.scrollX:", window.scrollX);

      //屏幕的宽度和高度
      console.log("window.screen.width:", window.screen.width);
      console.log("window.screen.height:", window.screen.height);

      //文档的宽度和高度
      console.log(
        "document.documentElement.clientWidth:",
        document.documentElement.clientWidth
      );
      console.log(
        "document.documentElement.clientHeight:",
        document.documentElement.clientHeight
      );
    };

    window.addEventListener("DOMContentLoaded", getDomInfos);
  </script>
  <style>
    #example {
      position: relative; /* 设置为相对定位，方便观察offset属性 */
      width: 300px;
      height: 200px;
      padding: 20px;
      border: 5px solid black;
      box-sizing: border-box;
      overflow: auto;
      background-color: lightblue;
    }
    .hidden-scrollbar {
      /* 为了演示innerWidth和outerWidth的区别 */
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* Internet Explorer 10+ */
      overflow-x: hidden; /* 隐藏水平滚动条 */
    }
  </style>
</html>