图解clientWidth，offsetWidth，scrollWidth，scrollTop

图解clientWidth，offsetWidth，scrollWidth，scrollTop
新手看到这几个属性，很头疼，参考了网上一些文章，加上自己实践，给出对这几个属性的解释

我把代码贴上来，方便大家验证

在chrome浏览器中，不知为什么图片容器高度比图片高度多了4px，把图片设置为block或者是容器的fontSize设置为0可解决这个问题。
```
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .div1 {
      position: absolute;
      top: 180px;
      left: 180px;
      width: 500px;
      height: 500px;
      background: #E91616;
      overflow: auto;
      z-index: 10;
      border: 20px solid green
    }

    .img1 {
      position: absolute;
      top: 200px;
      left: 200px;
      opacity: 0.5;
    }
  </style>
</head>

<body>
  <div class="div1">
    
    
    
    <img style="display: block" src="../common/baiduPicture/8.jpg" alt="">
  </div>
  <img class="img1" src="../common/baiduPicture/8.jpg" alt="">
</body>

</html>
```
图片是这个

页面效果，我放了两张图片，下面半透明的那张是完整显示，方便和框中的不完整的做对比。

水平方向上

1是clientWidth，2是offsetWidth，3是scrollWidth

不能我说是就是，要想办法验证一下

验证clientWidth

从图上看，clientWidth + 滚动条的宽度应该恰好等于div1的contentBox的宽度

而滚动条宽度可以用（注意要先清除body的margin）
```
window.innerWidth - document.body.clientWidth
```
来获取，我的结果是，滚动条宽度为17px

获取div1的clientWidth，483

获取divcontentBox的width，500（我在chrome下审查元素，显示的是483px，有偏差，在firefox下就显示的是500）

正好相等

验证offsetWidth

从图上看，offsetWith应该等于 clientWidth + 滚动条宽度 + 两边border宽度

获取offsetWith，540

样式中border是20

540 = 483 + 17 + 40，相等

验证scrollWidth

从图上看，scrollWidth应该等于图片宽度

获取scrollWidth，709

图片宽度也是709

两者相等

大家可以自己验证一下

垂直方向上

4是clientHeight，5是offsetHeight，6是scrollHeight

验证方法和上面一样。

scrollTop

我们在向下滚动滚动条的时候，可以看成是里面内容在向上移动，而scrollTop就是图片向上移动的距离。

按照这个说法，当滚动条在从最上面滚动到最下面的时候（如下图所示），图片的底线就是半透明图片的底线的位置，移动到，div1水平滚动条顶线的位置

所以，应该有

图片向上偏移的距离（scrollTop） = 图片的高度 - div1的clientHeight

图片的高度是987

div1的clientHeight是483

div1的scrollTop是504

等式成立

完

如果错误，欢迎讨论！
相关阅读:
[原创] 为Visio添加公式编辑器工具栏按钮
 Matlab 图论最短路问题模型代码
 「SCOI2011」「LOJ #2441」棘手的操作
 「APIO2012」「Luogu P1552」派遣
 「JLOI2015」「LOJ #2107」城池攻占
 「Wallace 笔记」LOJ 「数列分块入门」 9 题题解
 「Codeforces 235C」Cyclical Quest
「Codeforces 1037H」Security
「UVA 11468」Substring
「LOJ #2102」「TJOI2015」弦论
原文地址：https://www.cnblogs.com/maoscut/p/7637565.html

图解clientWidth，offsetWidth，scrollWidth，scrollTop

水平方向上

垂直方向上

scrollTop