JavaScript で div 要素の高さを取得する
HTML では、CSS スタイルシートまたは JavaScript を使用して要素に提供する CSS プロパティはすべて、ドキュメントオブジェクトモデル（DOM）内に設定されます。この DOM を介して、後で JavaScript コード内でこれらの値に簡単にアクセスできます。JavaScript 内の CSS プロパティの値を取得するにはさまざまな方法があります。この記事では、JavaScript コードから CSS プロパティ height を取得する方法を紹介します。
以下は、私たちが作成した HTML ドキュメントです。内部には、container の id を持つ単一の div 要素のみを含む body タグがあります。head タグでは、幅、高さ、境界線、パディングなど、div 要素にいくつかの基本的なスタイルを提供しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container{
width: 100px;
height: 50px;
border: 1px solid red;
padding: 4px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="container"></div>
<script></script>
</body>
</html>
出力：
上記の HTML ドキュメントを実行すると、ブラウザウィンドウにこのような長方形が表示されます。
すべての設定が完了したので、この container div 要素にさまざまなプロパティを適用して高さを取得しましょう。作成するコードは、body タグ内にある <script></script> タグ内に配置されます。
JavaScript で div 要素の高さを取得するさまざまな方法
まず、getElementById() メソッドを使用して、HTMLDOM から container 要素の参照を取得します。次に、その要素を JavaScript の element 変数内に格納します。
let element = document.getElementById('container');
div 要素ができたので、JavaScript を使用してさまざまなプロパティを使用して div の高さを取得しましょう。
1.clientHeight
clientHeight は、パディングを含む要素の高さを整数値として返します。
console.log(element.clientHeight);
出力：
58
高さ（現在は 50px）を計算するときに、コンテナの 4つの側面すべてに 4px のパディングを追加したため、4px の上部と 4px の下部のパディング、つまり、合計のパディングは 8px になります。高さに追加されます。これにより、全高は 58px になります。
2.offsetHeight
offsetHeight は要素の高さで構成され、パディング、境界線、および水平スクロールバー（存在する場合）も含まれます。
console.log(element.offsetHeight);
出力：
60
clientHeight プロパティと同様に、offsetHeight プロパティも 8px のパディング、コンテンツの高さは 50px、border-width は 1px top と 1px bottom、合計 2px を取ります。したがって、このプロパティによって返される全体の高さは、8 + 50 + 2、つまり 60px になります。
3.scrollHeight
scrollHeight は、オーバーフローのために画面に表示されないコンテンツを含む、コンテンツの高さを返します。要素のパディングのみが含まれ、境界線、マージン、または水平スクロールバーは含まれません。
scrollHeight は clientHeight に似ています。clientHeight と scrollHeight の唯一の違いは、scrollheight にはコンテンツの高さも含めることができるということです。コンテンツの高さは、オーバーフローのために現在画面に表示されていません。
console.log(element.scrollHeight);
出力：
58
コンテンツの高さは 50px で、パディングの合計は 8px です。したがって、scrollHeight プロパティによって返される合計の高さは 58px です。
4.getBoundingClientRect()
getBoundingClientRect() メソッドは、要素の幅と高さ、およびビューポートに対する相対的な位置（x、y、上、左など）に関連する情報を含むオブジェクトを返します。この方法で計算された高さには、パディングと境界線も含まれます。
console.log(element.getBoundingClientRect().height);
出力：
60
したがって、getBoundingClientRect() メソッドによって返されるオブジェクトから要素の高さを取得するには、height キーを使用して高さを取得する必要があります。ここで、要素の高さは 50px、パディングは 8px、border-width は 2px です。したがって、この関数によって合計 60px の高さが返されます。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn