javascript中offset、client、scroll的属性总结

在前端开发过程中，我们会经常使用到元素的位置信息。JavaScript中提供了一些用于获取页面元素位置信息的属性，其中比较常用的包括offset、client和scroll属性。这篇文章将对它们进行详细的总结，以帮助读者更好地理解它们的含义和使用方法。

offset属性

offset是指元素相对于文档的偏移量（即距离文档左上角的位置），它是一个包含了四个属性的对象，分别为：offsetTop、offsetLeft、offsetWidth和offsetHeight。

offsetTop和offsetLeft

offsetTop和offsetLeft属性分别表示元素相对于其offsetParent元素（即最近的position不为static的祖先元素）的上边缘和左边缘的距离。例如，如果一个元素的offsetTop为100px，那么它距离其offsetParent元素的上边缘就有100px的距离。

下面是一个示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
  <style>
    #box {
      position: relative;
      top: 50px;
      left: 100px;
      width: 200px;
      height: 100px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div id="box">hello world</div>
  <script>
    var box = document.getElementById('box');
    console.log(box.offsetTop); // 输出50
    console.log(box.offsetLeft); // 输出100
  </script>
</body>
</html>

在上面的示例代码中，我们设置了一个id为box的div元素，并将它的position属性设为relative，这使它的offsetParent元素为文档根元素。通过调用box.offsetTop和box.offsetLeft属性，我们可以获取到box元素相对于文档根元素的上边距和左边缘距离。

offsetWidth和offsetHeight

offsetWidth和offsetHeight属性分别表示元素的宽度和高度，包括元素的边框、内边距和滚动条（如果存在）的宽度。例如，如果一个元素的offsetWidth为300px，那么它的实际宽度为300px + 左右边框宽度 + 左右内边距宽度 + 左右滚动条宽度。

下面是一个示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
  <style>
    #box {
      width: 200px;
      height: 100px;
      border: 1px solid #ccc;
      padding: 10px;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ullamcorper nec lacus ac commodo.
    Sed lacinia, magna sed efficitur porta, dui lorem vestibulum nisi, et posuere lacus nulla sed ex. Suspendisse
    potenti. Vivamus rhoncus est a metus bibendum laoreet. Maecenas malesuada sodales tortor quis convallis.
  </div>
  <script>
    var box = document.getElementById('box');
    console.log(box.offsetWidth); // 输出222
    console.log(box.offsetHeight); // 输出132
  </script>
</body>
</html>

在上面的示例代码中，我们设置了一个id为box的div元素，并给它设置了边框、内边距以及滚动条。通过调用box.offsetWidth和box.offsetHeight属性，我们可以获取到box元素的实际宽度和高度。

client属性

client是指元素内容区域的大小（即不包括边框、滚动条等部分的宽度或高度），也是一个包含了四个属性

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/3857