offset系列属性

offsetTop

offsetTop:此属性可以获取元素的上边缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。 - 返回值是一个整数，单位是像素 - 此属性是只读的

offsetLeft

offsetLeft:此属性和offsetTop的原理是一样的，只不过方位不同。

offsetLeft值跟offsetTop值的获取跟父级元素没关系，而是跟其上一级的定位元素(除position:static;外的所有定位如fixed,relative,absolute)有关系。

offsetWidth

offsetWidth:此属性可以获取元素的宽度，宽度值包括：元素内容+内边距+边框。不包括外边距和滚动条部分。 - 返回值是一个整数，单位是像素 - 此属性是只读的

注意：offsetWidth 是一个 DHTML 对象模型中的属性，由微软 IE 浏览器首次引入。有时候它也可以称为一个元素的物理或图形尺寸，或者 border-box（译者注：即 CSS3 中的 border-box 模型）的宽度。

它的概念其实非常非常简单，就是在 box-sizing:border-box 的时候 offsetWidth 其实就等于 dom 元素的 width。

标准盒子模型box-sizing:content-box 的时候 offsetWidth 就等于元素内容+内边距+边框。

offsetHeight

offsetHeight:此属性可以获取元素的高度，高度值包括：元素内容+内边距+边框。不包括外边距和滚动条部分。 - 返回值是一个整数，单位是像素 - 此属性是只读的

offsetWidth/offsetHeight 对象的可见宽度/高度

client系列

clientWidth

clientWidth:此属性可以返回一个元素的宽度值，宽度值：元素内容+内边距。不包括边框、外边距和滚动条部分。 - 返回值是一个整数，单位是像素 - 此属性是只读的

clientHeight

clientHeight:此属性可以返回一个元素的高度值，高度值：元素内容+内边距。不包括边框、外边距和滚动条部分。 - 返回值是一个整数，单位是像素 - 此属性是只读的

clientWidth/clientHeight 内容的可见宽度

scroll系列

scrollLeft

scrollLeft:此属性可以获取或设置对象的最左边到对象在当前窗口显示范围内的左边的距离，也就是元素被滚动条向左拉动的距离。 - 返回值是一个整数，单位是像素 - 此属性是只读的

scrollLeft 可以是任意整数，然而：

如果元素不能滚动（比如：元素没有溢出），那么scrollLeft 的值是 0。
如果给scrollLeft 设置的值小于 0，那么scrollLeft 的值将变为 0。
如果给scrollLeft 设置的值大于元素内容最大宽度，那么scrollLeft 的值将被设为元素最大宽度。

scrollTop

scrollTop:此属性获取或设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离，也就是元素滚动条被向下拉动的距离。 - 返回值是一个整数，单位是像素 - 此属性是只读的

滚动条到顶部的垂直高度（即网页被卷上去的高度）

eg:

html 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#myDIV {
  height: 250px;
  width: 250px;
  overflow: auto;
}

#content {
  height: 800px;
  width: 2000px;
  background-color: coral;
}
</style>

<body>
<h1>元素对象</h1>
<h2>scrollTop 与 scrollLeft 属性</h2>

<p>滚动滚动条，查看数字变化：</p>

<div id="myDIV" onscroll="myFunction()">
  <div id="content">滚动我！</div>
</div>

<p id="demo"></p>

<script>
function myFunction() {
  const element = document.getElementById("myDIV");
  let x = element.scrollLeft;
  let y = element.scrollTop;
  document.getElementById ("demo").innerHTML = "水平方向: " + x.toFixed() + "<br>垂直方向: " + y.toFixed();
}
</script>

</body>
</html>

scrollHeight

scrollHeight:只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。高度包含内边距（padding），不包含外边距（margin）、边框（border）

属性是一个只读属性。
是一个整数，单位是像素 px。

scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。
高度的度量方式与 clientHeight 相同：包括元素的内边距 ，但不包括元素的边框、外边距以及水平滚动条（如果存在）。它也包括 ::before 和 ::after 这样的伪元素的高度。如果元素的内容不需要垂直滚动条就可以容纳，则其 scrollHeight 等于 clientHeight。

此属性获取对象的实际尺寸。

scrollWidth

scrollWidth: 它返回该元素的像素宽度，宽度包含内边距（padding），不包含外边距（margin）、边框（border） - 属性是一个只读属性。 - 是一个整数，单位是像素 px。

同理scrollHeight
scrollWidth 和 scrollHeight 主要用于确定元素内容的实际大小

scrollLeft 和 scrollTop 属性既可以确定元素当前滚动的状态，也可以设置元素滚动的位置

垂直滚动 scrollTop>0

水平滚动 scrollLeft>0 将元素的 scrollLeft 和 scrollTop 设置为0，可以重置元素的滚动位置

HTML DOM的距离属性