offsetHeight scrollHeight clientHeight 区别

本文链接：https://blog.csdn.net/qq_40988677/article/details/129277980

示例

<style>
  * {
    padding: 0;
    margin: 0;
  }
  body {
    background-color: #f1f1f1;
  }
  #container {
    width: 250px;
    height: 150px;
    padding: 20px;
    margin: 30px;
    border: 5px solid #ccc;
    box-sizing: border-box;
    overflow: auto;
    background-color: #fff;
  }
  #content {
    width: 600px;
    height: 500px;
    display: inline-block;
    background-color: #f1f1f1;
  }
</style>

<body>
  <p>offsetHeight</p>

  <div id="container">
    <!--<div id="content">
      <p>offHeight scrollHeight clientHeight 区别</p>
    </div>-->
  </div>
</body>

<script>
  const container = document.getElementById('container')
  console.log('offsetWidth', container.offsetWidth)
  console.log('offsetHeight', container.offsetHeight)
  console.log('clientWidth', container.clientWidth)
  console.log('clientHeight', container.clientHeight)
  console.log('scrollWidth', container.scrollWidth)
  console.log('scrollHeight', container.scrollHeight)
</script>

计算规则

offsetHeight offsetWidth：border + padding + content
代码中如果注释content盒子，那么输出为：
1）offsetWidth = 5 * 2 + 20 * 2 + 250 = 300（content 为250是因为设置了 box-sizing: border-box，因此offsetWidth实则为container盒子的宽度）
2）offsetHeight = 5 * 2 + 20 * 2 + 150 = 200（分析同上）
clientHeight clientWidth：padding + content
代码中如果注释content盒子，那么输出为：
1）clientWidth = 20 * 2 + 250 = 290（比 offsetWidth 少一个边框宽度）
2）clientHeight = 20 * 2 + 150 = 190（分析同上）
scrollHeight scrollWidth：padding + 实际内容尺寸
代码中如果注释content盒子，那么输出为：
1）scrollWidth = clientWidth
2）scrollHeight = clientHeight
代码中如果不注释content盒子，那么输出为：
1）scrollWidth = 20 * 2 + 600 = 640（600为 content 盒子的宽度）
2）scrollHeight = 20 * 2 + 500 = 540 （500为 content 盒子的长度）