バニラJavaScriptでdiv要素の高さを取得する方法【clientHeightとoffsetHeightの違い】

divの高さを取得できる2つのプロパティ

バニラJavaScript(ライブラリやフレームワークに依存しない素のJavaScript)では、clientHeightとoffsetHeightという2つのプロパティを使って、div要素の高さを簡単に取得できます。

どちらもピクセル単位の整数値を返しますが、計算に含まれる要素が異なるため、用途に応じて適切に使い分けることが大切です。

• clientHeight:要素の高さにパディングを含みます。ボーダーやスクロールバーは含まれません。
• offsetHeight:要素の高さにパディング・スクロールバー・ボーダーをすべて含みます。

違いの比較表

使用例

たとえば、次のようなHTMLがあるとします。

<div id="myDiv" style="height: 400px;"></div>

このdiv要素の高さは、querySelectorで要素を取得したうえで、以下のようにして求められます。

const height = document.querySelector('#myDiv').offsetHeight;
console.log(height);

実行結果

このコードを実行すると、コンソールには次のように出力されます。

400

補足:getBoundingClientRectとの違い

より詳細なレイアウト情報が必要な場合は、getBoundingClientRect()メソッドも便利です。このメソッドは小数点以下を含む正確なサイズや位置を返すため、変換(スケーリング)が適用された要素の高さを取得したい場合に有効です。

const rect = document.querySelector('#myDiv').getBoundingClientRect();
console.log(rect.height); // 高さを出力

単純にレイアウト上の高さを整数で取得したいならoffsetHeight、精密な測定が必要ならgetBoundingClientRect()というように、目的に合わせて選択しましょう。