JavaScript で div 要素の高さを取得する

ブラウザー上の JavaScript で <div> 要素の高さを取得するには、まず要素を選択し、目的に合った値を読み取ります。内側のボックスなら clientHeight、境界線を含むボックスなら offsetHeight、はみ出した分を含むコンテンツ全体なら scrollHeight、描画された矩形の高さなら getBoundingClientRect().height を使います。各プロパティが測る範囲は異なるため、値が一致しないことがあります。

次の実行可能な例は、コンテンツ領域が 50px、パディングが 4px、境界線が 1px のボックスをモデル化しています。ブラウザーの DOM を使わずに Node で実行し、それぞれの測定値を出力します。ブラウザーでは、選択した DOM 要素から同じプロパティを読み取ってください。

const element = {
  contentHeight: 50,
  padding: 4,
  border: 1,
  get clientHeight() {
    return this.contentHeight + 2 * this.padding;
  },
  get offsetHeight() {
    return this.clientHeight + 2 * this.border;
  },
  get scrollHeight() {
    return this.clientHeight;
  },
  getBoundingClientRect() {
    return { height: this.offsetHeight };
  }
};

console.log('clientHeight:', element.clientHeight);
console.log('offsetHeight:', element.offsetHeight);
console.log('scrollHeight:', element.scrollHeight);
console.log('bounding height:', element.getBoundingClientRect().height);

clientHeight: 58
offsetHeight: 60
scrollHeight: 58
bounding height: 60

JavaScript で div の高さを測定する

DOM から ID で既存の要素を選択し、以下の測定方法から必要なものを選びます。上の Node の例は、指定されたボックスの測定値をモデル化したものです。ページ上の要素を測るときは、element を document.getElementById('container') の戻り値や、別のセレクターで取得した要素に置き換えてください。要素がドキュメントに追加され、レイアウトが確定してから寸法を読み取ります。

必要なボックスに応じて測定方法を選びます。内側のボックスには clientHeight、境界線を結果に含める場合は offsetHeight、スクロール対象となるコンテンツ全体の高さが必要な場合は scrollHeight、描画された矩形の寸法を知りたい場合は getBoundingClientRect().height を使います。どの値にもマージンは含まれません。余白も計算に必要なら、該当するレイアウト上の間隔を別に測定してください。これらの値の単位は CSS ピクセルであり、画面上の物理ピクセルではありません。

clientHeight

clientHeight は CSS ピクセル単位の内側の高さです。上下のパディングを含みますが、境界線とマージンは含みません。この例では、コンテンツの高さ 50px に上下それぞれ 4px のパディングを加えるため、値は 58 です。このプロパティが返す値は整数です。

offsetHeight

offsetHeight は、要素のコンテンツ、パディング、境界線、および横スクロールバーがあればその高さを含みます。マージンは含みません。この例では 50 + 8 + 2 = 60 ピクセルです。このプロパティも整数を返します。

scrollHeight

scrollHeight は、コンテンツが表示領域を超えている場合に、その領域外にはみ出した部分も含めたコンテンツ全体の高さを測定します。パディングは含みますが、境界線とマージンは含みません。この例ではコンテンツがはみ出していないため、値は 58 です。コンテンツがはみ出すページでは、clientHeight より大きくなることがあります。測定値は整数ですが、どのレイアウトでも clientHeight と等しくなるとは限りません。

getBoundingClientRect()

getBoundingClientRect() は、ビューポートに対する要素の描画後のサイズと位置を表す矩形を返します。描画後の高さを取得するには、その height プロパティを読み取ります。パディングと境界線を含むため、この例で測定される値は 60 ピクセルです。前述の整数値を返す寸法プロパティとは異なり、レイアウトや変換によってサブピクセルの寸法が生じると、この高さは小数になることがあります。スクロール可能なコンテンツの高さではなく、描画後の矩形を知りたい場合に使います。