前端：常用的获取元素位置与元素尺寸的属性与方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端：常用的获取元素位置与元素尺寸的属性与方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

属性/方法	描述
`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文档元素在视口内的可视高度，不包括滚动条

下面有一个简单的示例：文章来源地址https://www.toymoban.com/news/detail-850081.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>

到了这里，关于前端：常用的获取元素位置与元素尺寸的属性与方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！