Do you know the difference between offsetHeight, scrollHeight and clientHeight?

Get into the habit of writing together! This is the first day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event .

foreword

The three attributes offsetHeight, scrollHeight, and clientHeight are often encountered in development. If friends do not use them often, it is easy to confuse these attributes, such as window height, element height, content height, and so on. Of course, the current front-end framework often encapsulates these attributes for us, but we can't rely too much on the framework. We still need to understand the underlying principles. Today, let's discuss what these three attributes represent?

1. Box model

Before introducing these three properties, let's learn about the CSS box model, because if you encounter this question in the interview, the interviewer usually wants to examine your knowledge of the box model.

The box model, as the name suggests, means a box, and a box can hold a lot of things. For example, our div can be compared to a box, so a complete box mainly includes the following parts:

width
height
padding
border
margin
box-sizing (used to distinguish between normal box models and weird box models)

A box is roughly composed of the above properties, and the box model is divided into normal and model and strange and model.

1.1 The normal box model

We can clearly know what a normal box model is by borrowing a picture:

As can be seen from the above figure: the width is the width of the content. When we modify the padding or border properties, the total width of the box will change.

1.2 Weird Box Model

Again, let's understand the weird box model with the help of a diagram:

As can be seen from the above figure: the width of the box = content width + padding + border.

After a brief understanding of the box model in CSS, let's learn about these three height properties.

2.offsetHeight

Briefly summarized in one sentence: Get the height of the element, including padding and border.

It should be noted that if our box is a normal box, the height is only the content height, so usually we need to change the box model to a weird box model and use the box-sizing property.

code show as below:

<head>
  <style>
    .box1 {
      width: 100px;
      height: 100px;
      padding: 20px;
      margin: 30px;
      border: 5px solid yellow;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="box1">盒子1</div>
</body>
<script>
  const box1 = document.getElementsByClassName("box1")[0];
  console.info("盒子1的offsetHeight",box1.offsetHeight)
</script>
复制代码

打印结果：

结果解释：

最终offsetHeight = 150px，我们说过offsetHeight是获取元素的高度，上面代码中我们元素的高度设置为100px，但是offsetHeight却是150px，这就是因为正常盒子模型的宽度等于内容宽度的原因，实际上box1占据的宽度要更宽。

实际上offsetHeight = 100 + 20(padding) + 20(padding) + 5(border) + 5(border)。

在实际项目中，为了获得更准确，或者最真实的元素宽度，我们需要把正常盒子模型转为怪异盒子模型，添加属性box-sizing:border-box.。

代码如下：

<style>
  .box1 {
    width: 100px;
    height: 100px;
    padding: 20px;
    margin: 30px;
    border: 5px solid yellow;
    box-sizing: border-box;
    background-color: #ccc;
  }
</style>
复制代码

输出结果：

总结：offsetHeight = content+ padding + border

3.clientHeight

简单总结为一句话：获取元素的高度，包含padding。

这个属性和offsetHeight类似，唯一的区别就是它不包含border，具体来看代码演示。

代码如下：

<style>
.box2 {
  width: 100px;
  height: 100px;
  padding: 20px;
  margin: 30px;
  border: 5px solid yellow;
  box-sizing: border-box;
  background-color: #ccc;
}
</style>
<body>
  <div class="box1">盒子1</div>
  <div class="box2">盒子2</div>
</body>
<script>
  const box1 = document.getElementsByClassName("box1")[0];
  const box2 = document.getElementsByClassName("box2")[0];
  console.info("盒子1的offsetHeight",box1.offsetHeight);
  console.info("盒子2的clientHeight",box2.clientHeight);
</script>
复制代码

输出结果：

总结：clientHeight = content + padding

4.scrollHeight

简单总结为一句话：获取元素的高度，包含padding。

这个属性和clientHeight类似，都不包含border，那么具体有什么不一样呢，我们看代码演示。

代码如下：

<style>
  .box3 {
    width: 100px;
    height: 100px;
    padding: 20px;
    margin: 30px;
    border: 5px solid yellow;
    box-sizing: border-box;
    background-color: #ccc;
  }
</style>
<body>
  <div class="box1">盒子1</div>
  <div class="box2">盒子2</div>
  <div class="box3">盒子3</div>
</body>
<script>
  const box1 = document.getElementsByClassName("box1")[0];
  const box2 = document.getElementsByClassName("box2")[0];
  const box3 = document.getElementsByClassName("box3")[0];
  console.info("盒子1的offsetHeight", box1.offsetHeight);
  console.info("盒子2的clientHeight", box2.clientHeight);
  console.info("盒子3的scrollHeight", box3.scrollHeight);
</script>
复制代码

输出结果：

可以看到scrollHeight和clientHeight输出结果一样，那么它们之间有什么区别呢？

其实它们的区别就一个：scrollHeight的高度需要更具内容的实际尺寸决定，比如我们修改一下我们的代码。

代码如下：

.box3 {
  width: 100px;
  height: 100px;
  padding: 20px;
  margin: 30px;
  border: 5px solid yellow;
  box-sizing: border-box;
  background-color: #ccc;
  overflow: auto;
}
<div class="box3">
  <div style="height: 300px;">盒子3</div>
</div>
复制代码

输出结果：

上段代码中我们在box3中添加了一个div，并且设置高度300px，此时的scrollHeight输出340px，也就代表我们的scrollHeight是需要根据实际的内容尺寸计算的。

总结：scrollHeight = 实际内容尺寸+ padding

总结

这三个属性虽然都很类似，但是每一个又有一些不一样的地方，总结起来就下面三点：

offsetHeight = content height + padding + border
clientheight = content height + padding
scrollHeight = actual size of content + padding