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
の高さが返されます。