要素の高さを正しく取得したいと考えているあなたへ。JavaScriptには複数の方法があり、どの値が必要かによって使い分けが重要です。たとえば「表示されている高さ」か「ボーダー込みか」か「スクロール可能領域の全体か」か。この記事では「要素の高さ 取得 方法」という観点で、offsetHeight、clientHeight、scrollHeight、getBoundingClientRectなどの使い方と違いを丁寧に解説していきます。これを読めば目的に応じた最適な取得方法が選べるようになります。
目次
要素の高さ 取得 方法で使われる主なプロパティとメソッドの一覧
要素の高さを取得する際に一般的に使われるプロパティやメソッドには、それぞれ特徴があります。
offsetHeight
要素全体がレイアウト上占めている高さを返します。具体的にはコンテンツの高さ＋上下のパディング＋上下のボーダーを含みます。マージンは含まれません。スクロールバーの高さは含まれる場合と含まれない場合があり、ブラウザ挙動によります。大抵整数値で返され、小数点以下は切り捨てられます。
clientHeight
要素の「内部表示可能領域」の高さを返します。コンテンツ＋上下のパディングを含みますが、ボーダーとマージンとスクロールバー（オーバーフローしている部分）は除かれます。表示されている部分のみなので、スクロールが必要な要素では visible な領域の高さのみ取得できます。
scrollHeight
要素のコンテンツ全体の高さを返します。表示されていないオーバーフロー部分も含み、パディングを含みますがボーダーやマージンは含まれません。スクロール要素で中身がはみ出しているかどうかを判断したり、コンテンツの全体高さに基づいてスクロール動作を制御するのに使われます。
getBoundingClientRect().height
要素の「レンダリング後の高さ」を返します。CSS変形（transformなど）があればその影響も考慮されます。小数点以下の値が返されるので、精度重視の用途に適しています。ビューポートに対する位置情報もまとめて取得できるため、表示位置との兼ね合いで使われる場面が多いです。
各プロパティ・メソッドを使い分ける具体的なケース
実際の開発では、シーンに応じてどの取得方法を使うかを判断する必要があります。用途と必要な精度に応じて使い分けるポイントを解説します。
表示されている高さのみ取得したいとき
画面上で実際に見えている部分の高さを把握したい場合には clientHeight を使います。例えば表示中のモーダルの可視部分の高さや、スクロールバーで隠れていない部分の高さ計測などに便利です。padding を含むため内容の収まり具合も確認しやすいです。
レイアウトで要素が占めるスペースを把握したいとき
隣の要素と重ならないように配置を決めたり、要素間の余白分を含めてレイアウト全体を考えるときには offsetHeight が便利です。padding とボーダーも含むため要素の視覚的な占有領域を把握できます。ただしマージンは含まれないので、マージンを考慮する場合は別途取得が必要になります。
コンテンツの全体高さ（スクロール可能領域）を計測したいとき
長文や動的に生成されるリストなど、要素内部でスクロールが発生している際には scrollHeight が役立ちます。visible な高さ＋隠れている部分も含まれるからです。スクロールの上下位置の制御や「全部読めるかどうか」判定などに適しています。
CSS変形やビュー位置を考慮に入れたいとき
例えば scale や rotate といった transform を適用している要素では、offsetHeight は変形前のレイアウト高さを返すことがあります。ビュー上でどの高さに見えているか正確に知りたい場合は getBoundingClientRect().height を使うことで、画面上の見た目に即した高さを取得できます。
JavaScriptで高さを取得する際の典型的な実装例
ここでは実際のコードを用いて「要素の高さ 取得 方法」を実装する例をいくつか紹介します。実務でよく使われるパターンをピックアップします。
offsetHeightを使う例
以下は、要素のレイアウト上占有高さを取得する典型的な例です。ボーダーもパディングも含めます。
const el = document.querySelector('.box');
const h = el.offsetHeight;
console.log('高さ：' + h + 'px');
clientHeightを使う例
中身の表示領域の高さだけが欲しいときの例です。visible な部分を知るのに適しています。
const el = document.getElementById('content');
const hVisible = el.clientHeight;
console.log('表示領域の高さ：' + hVisible + 'px');
scrollHeightを使う例
中身が見えていない部分も含めた全文の高さを取得する例です。スクロールを利用する要素で使われます。
const el = document.querySelector('.scroll-container');
const totalH = el.scrollHeight;
console.log('中身の総高さ：' + totalH + 'px');
getBoundingClientRectでレンダリング後の高さを取得する例
CSS変形やズームなどを適用している場合に使います。画面に表示されている見た目そのままの高さを取得できます。
const el = document.querySelector('.transform-box');
const rect = el.getBoundingClientRect();
console.log('画面上の高さ：' + rect.height.toFixed(2) + 'px');
注意すべき落とし穴とよくある誤解
測定結果が思ったものと違うとき、多くの原因は細かい仕様の見落としです。「要素の高さ 取得 方法」を正しく使うための注意点を整理します。
要素が非表示または display:none の場合
非表示の要素、または display プロパティが none の要素は offsetHeight や clientHeight や scrollHeight が 0 を返すことがあります。DOM に挿入されていても display:noneであればレンダリングされていないのでこれらの測定値は無効になります。表示状態を確認してから取得する必要があります。
親要素の高さが未定義の場合のパーセンテージ指定
CSSで高さを百分率指定していても、親要素の高さが定義されていないと計算結果が想定と異なることがあります。親が auto の高さだと百分率が機能しないため、まず親要素に明示的な高さを設定することが望ましいです。
border-box や box-sizing の影響
CSS の box-sizing 設定によって、高さをどこまで含むかが変わります。content-box の場合は height は内容エリアのみ、border-box の場合はパディングとボーダーを含める設定です。offsetHeight などは box-sizing に関係なくボーダーやパディング分を含みますが、CSSで height を指定する場合の扱いと混同しないように注意が必要です。
CSS変形（transform）による見た目のズレ
transform で scale や rotate を使っている要素では、offsetHeight が変形前のレイアウト高さを返すことがあります。画面上で見た目が縮小・拡大されていても offsetHeight は変形前の整数値を返すため、変形後の見た目高さを取得するには getBoundingClientRect().height を使います。
最新のAPIやツールを利用した方法
ここではモダンな実装で有用な API やツールを紹介します。
getComputedStyle を使う方法
getComputedStyle を使うと、CSS で指定された高さ（スタイルシートや style 属性）を取得できます。ただし、auto の場合や percentage の場合、レンダリング後の実際値とは異なることがあり、特に visible なサイズや変形後の見た目と比較すると混乱しやすいです。必要に応じて値を parse して数値化することが多いです。
ResizeObserver を使った動的な高さ取得
要素サイズが動的に変化する場合には ResizeObserver を使うと便利です。高さが変わるイベントを監視してコールバックで getBoundingClientRect や offsetHeight などを取得できます。レイアウト変更やコンテンツの追加削除に追従できるため、モダンなブラウザで用いるとスムーズです。
レスポンシブデザイン下での注意点
画面サイズによって要素の表示幅が変わると、高さも変化することがあります。メディアクエリや flexbox や grid レイアウトを使っている場合、幅変化が高さに影響するケースがあります。resize イベントをリッスンしたり、ResizeObserver を活用して高さを再計測するようにしておくと良いです。
比較表：測定プロパティ・メソッドの特徴まとめ
| プロパティ／メソッド | 含まれる要素 | 表示されている部分か | 精度・小数点 | transform対応 |
|---|---|---|---|---|
| offsetHeight | コンテンツ＋パディング＋ボーダー | 表示されているレイアウト分 | 整数 | いいえ（transform無視） |
| clientHeight | コンテンツ＋パディング | 可視部分のみ | 整数 | いいえ |
| scrollHeight | コンテンツ＋パディング（オーバーフロー含む） | 全体（非表示含む） | 整数 | いいえ |
| getBoundingClientRect().height | コンテンツ＋パディング＋ボーダー | 表示されているレイアウト分 | 小数点あり | はい（transform等考慮） |
まとめ
JavaScriptで要素の高さを取得する方法には複数あり、それぞれ用途と特性が異なります。offsetHeight はボーダーとパディング込みのレイアウト上の高さを整数で返し、clientHeight は可視コンテンツのパディング込み高さを取得します。scrollHeight は全体のコンテンツ高さを把握したいときに適しており、getBoundingClientRect().height は変形後の見た目や高精度が必要なケースで有効です。
また、要素が非表示であることや display プロパティ、親要素の高さの未定義、box-sizing の設定、transform の有無などが測定結果に大きく影響を与えるため、これらの条件も確認することが大切です。用途次第で最適な方法を選ぶことで、思った通りの表示制御やレイアウト調整が可能になります。
コメント