HTMLElement.offsetHeight

HTMLElement.offsetHeight 読み取り専用プロパティは、垂直パディングや境界線を含む要素の高さを整数として返します。

通常、offsetHeight は、境界線、パディング、および水平スクロールバー(レンダリングされている場合)を含む、要素の CSS height のピクセル単位の測定値です。 ::before::after などの擬似要素の高さは含まれません。 ドキュメントの body オブジェクトの場合、測定値には、要素の CSS height ではなく、線形コンテンツの高さの合計が含まれます。 他の線形コンテンツの下に広がる浮動要素は無視されます。

(例えば、要素またはその祖先のいずれかで style.display"none" に設定することにより)要素が非表示の場合、0 が返されます。

このプロパティは、値を整数に丸めます。 小数値が必要な場合は、element.getBoundingClientRect() を使用します。

構文

var intElemOffsetHeight = element.offsetHeight;

intElemOffsetHeight は、要素の offsetHeight ピクセル値に対応する整数を格納する変数です。 offsetHeight プロパティは読み取り専用です。

             Image:Dimensions-offset.png

上のサンプル画像は、スクロールバーにより、ウィンドウに収まる場合の offsetHeight を示しています。 ただし、スクロールできない要素には、目に見えるコンテンツよりもはるかに大きい大きな offsetHeight 値が含まれる場合があります。 これらの要素は通常、スクロール可能な要素内に含まれています。 その結果、これらの非スクロール要素は、スクロール可能なコンテナの scrollTop の設定に応じて、完全にまたは部分的に非表示になる場合があります。

仕様

仕様 状態 コメント
CSS Object Model (CSSOM) View Module
offsetHeight の定義
草案

ノート

offsetHeight は、MSIE によって最初に導入された DHTML オブジェクトモデルのプロパティです。 要素の物理的/グラフィカルな寸法、または要素の境界ボックスの高さ(border-box height)と呼ばれることもあります。

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
offsetHeightChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 8Opera 完全対応 8Safari 完全対応 3WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報