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
offsetHeight
実験的
Chrome 完全対応 47Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 11WebView Android 完全対応 47Chrome Android 完全対応 47Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

関連情報