JavaScriptのclientHeightとoffsetHeightの違いとは？高さ取得プロパティを徹底解説

JavaScriptで要素（divなど）の高さを取得したい場合、clientHeight と offsetHeight の2つのプロパティを利用できます。どちらも要素の高さを返しますが、計算に含まれる要素が異なるため、用途に応じて使い分ける必要があります。

clientHeightとは

clientHeight は、要素の「表示領域」の高さを返すプロパティです。パディング（padding）は含まれますが、ボーダー（border）やスクロールバーは含まれません。

含まれるもの・除外されるもの

• 含まれる：コンテンツ領域、パディング
• 除外される：ボーダー、マージン、スクロールバー

offsetHeightとは

offsetHeight は、要素全体の高さを返すプロパティです。パディングに加えて、スクロールバーとボーダーも高さに含まれます。CSSで指定した見た目通りの高さを取得したい場合に適しています。

含まれるもの・除外されるもの

• 含まれる：コンテンツ領域、パディング、スクロールバー、ボーダー
• 除外される：マージン

違いのまとめ

使用例

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

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

offsetHeight を使って高さを取得するコードは以下の通りです。

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

出力結果

このコードを実行すると、コンソールには以下のように要素の高さが出力されます。

400

同様に clientHeight を使えば、ボーダーやスクロールバーを除いた内部領域の高さを取得できます。レイアウト計算やスクロール制御など、目的に合わせて適切なプロパティを選択しましょう。