Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan · April More text challenge”, click to see the details of the activity.

preface

OffsetHeight, scrollHeight, clientHeight, etc. These three properties are often encountered in development. If you do not use them often, it is easy to confuse them, such as window height, element height, content height, etc. Of course, front-end frameworks often help us to encapsulate these attributes, but we should not rely too much on the framework, we still need to understand the underlying principle, today to clarify what these three attributes represent.

1. Box model

Before introducing these three properties, take a look at the CSS box model, because when this comes up in an interview, the interviewer will often want to test your knowledge of the box model.

As the name implies, the box model means box, and a lot of things can be contained in the box. For example, our DIV can be compared to a box, so a complete box consists of the following parts:

  • width
  • height
  • padding
  • border
  • margin
  • Box-sizing (differentiating normal box models from weird box models)

A box is roughly made up of some of the above properties, and the box model is divided into normal and weird and weird.

1.1 Normal box model

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

As you can see from the figure above, width is the width of the content. When we modify the padding or border property, the total width of the box changes.

1.2 Weird Box model

Again, we use a diagram to understand the weird box model:

The box width = content width + padding + border.

With a brief look at the box model in CSS, let’s take a look at these three high attributes.

2.offsetHeight

Get the height of the element, including the padding and border.

Note that if our box is a normal box, then the height is only the content height, so usually we need to change the box model to the weird box model, using the box-sizing property.

The code is as follows:

<head> <style> .box1 { width: 100px; height: 100px; padding: 20px; margin: 30px; border: 5px solid yellow; background-color: #ccc; } </style> </head> <body> <div class="box1"> box1 </div> </body> <script> const box1 = document.getElementsByClassName("box1")[0]; Console. info(" box1 offsetHeight", box1.offsetheight) </script>Copy the code

Print result:

Interpretation of the results:

Finally, offsetHeight = 150px. We said that offsetHeight is the height of the fetch element. In the code above, we set the height of the element to 100px, but offsetHeight is 150px. Box1 actually takes up a wider width.

Actually offsetHeight = 100 + 20(padding) + 20(padding) + 5(border) + 5(border).

In a real project, to get a more accurate, or realistic, element width, we would need to convert the normal box model into a weird box model and add the attribute box-sizing:border-box.

The code is as follows:

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

Output result:

OffsetHeight = content+ padding + border

3.clientHeight

Get the height of the element, including the padding.

This property is similar to offsetHeight except that it does not contain the border, as demonstrated in the code.

The code is as follows:

<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"> box1 </div> <div class="box2"> box2 </div> </body> <script> const box1 = document.getElementsByClassName("box1")[0]; const box2 = document.getElementsByClassName("box2")[0]; Console. info(" box1 offsetHeight", box1.offsetheight); Console. info(" box2 clientHeight", box2.clientheight); </script>Copy the code

Output result:

ClientHeight = Content + padding

4.scrollHeight

Get the height of the element, including the padding.

This property is similar to clientHeight, but does not contain the border.

The code is as follows:

<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"> box1 </div> <div class="box2"> box2 </div> <div class="box3"> box3 </div> </body> <script> const box1 = document.getElementsByClassName("box1")[0]; const box2 = document.getElementsByClassName("box2")[0]; const box3 = document.getElementsByClassName("box3")[0]; Console. info(" box1 offsetHeight", box1.offsetheight); Console. info(" box2 clientHeight", box2.clientheight); Console. info(" box3's scrollHeight", box3.scrollHeight); </script>Copy the code

Output result:

You can see that scrollHeight and clientHeight output are the same, so what’s the difference between them?

There is only one difference: the height of the scrollHeight needs to be determined by the actual size of the content, for example if we modify our code.

The code is as follows:

.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;" > Box 3</div> </div>Copy the code

Output result:

In the previous code, we added a div to box3 and set the height to 300px. The scrollHeight output is 340px, which means that our scrollHeight needs to be calculated according to the actual content size.

Summary: scrollHeight = actual content size + padding

conclusion

Although these three attributes are very similar, each one has some differences, which can be summarized as the following three points:

  • OffsetHeight = Content height + padding + border
  • Clientheight = Content height + padding
  • ScrollHeight = actual content size + padding