offsetHeight、scrollHeight、clientHeightの違いを知っていますか？

一緒に書く習慣を身につけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加した初日です。クリックしてイベントの詳細をご覧ください。

序文

3つの属性offsetHeight、scrollHeight、およびclientHeightは、開発中に頻繁に発生します。友人がこれらを頻繁に使用しない場合、ウィンドウの高さ、要素の高さ、コンテンツの高さなどのこれらの属性を混同しがちです。もちろん、現在のフロントエンドフレームワークはこれらの属性をカプセル化することがよくありますが、フレームワークにあまり依存することはできません。基本的な原則を理解する必要があります。今日は、これら3つの属性が何を表すかについて説明します。

1.ボックスモデル

これらの3つのプロパティを紹介する前に、CSSボックスモデルについて学習しましょう。インタビューでこの質問に遭遇した場合、インタビュアーは通常、ボックスモデルに関する知識を調べたいと考えているためです。

ボックスモデルは、その名前が示すように、ボックスを意味し、ボックスには多くのものを収納できます。たとえば、divはボックスと比較できるため、完全なボックスには主に次の部分が含まれます。

幅
身長
パディング
国境
マージン
ボックスサイズ（通常のボックスモデルと奇妙なボックスモデルを区別するために使用）

ボックスは、上記のプロパティで大まかに構成されており、ボックスモデルは、ノーマルとモデル、ストレンジとモデルに分けられます。

1.1通常のボックスモデル

写真を借りることで、通常のボックスモデルが何であるかを明確に知ることができます。

上の図からわかるように、幅はコンテンツの幅です。パディングまたはボーダーのプロパティを変更すると、ボックスの全幅が変更されます。

1.2奇妙なボックスモデル

繰り返しになりますが、図を使用して奇妙なボックスモデルを理解しましょう。

上の図からわかるように、ボックスの幅=コンテンツの幅+パディング+境界線。

CSSのボックスモデルについて簡単に理解した後、これらの3つの高さプロパティについて学びましょう。

2.offsetHeight

一文に簡単に要約：パディングと境界線を含む要素の高さを取得します。

ボックスが通常のボックスの場合、高さはコンテンツの高さのみであるため、通常、ボックスモデルを奇妙なボックスモデルに変更し、box-sizingプロパティを使用する必要があることに注意してください。

コードは次のように表示されます。

<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=コンテンツの高さ+パディング+ボーダー
clientheight=コンテンツの高さ+パディング
scrollHeight=コンテンツの実際のサイズ+パディング