HTML DOMoffsetHeightプロパティ
例
パディングとボーダーを含む<div>要素の高さと幅を取得します。
var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
offsetHeightプロパティは、パディング、境界線、スクロールバーを含む要素の表示可能な高さをピクセル単位で返しますが、マージンは返しません。
「viewable」という単語が指定されている理由は、要素のコンテンツが要素の実際の高さよりも高い場合、このプロパティは表示されている高さのみを返すためです（「その他の例」を参照）。
注：このプロパティを理解するには、 CSSボックスモデルを理解する必要があります。
ヒント：このプロパティは、 offsetWidthプロパティと一緒に使用されることがよくあり ます。
ヒント： clientHeightプロパティとclientWidthプロパティを使用して 、要素の表示可能な高さと幅を返します。これには、パディングのみが含まれます。
ヒント：要素にスクロールバーを追加するには、CSS オーバーフロープロパティを使用します。
このプロパティは読み取り専用です。
ブラウザのサポート
| Property | |||||
|---|---|---|---|---|---|
| offsetHeight | Yes | Yes | Yes | Yes | Yes |
構文
element.offsetHeight
技術的な詳細
| 戻り値： | パディング、境界線、スクロールバーなど、要素の表示可能な高さをピクセル単位で表す数値。 |
|---|
その他の例
例
この例は、clientHeight / clientWidthとoffsetHeight / offsetWidthの違いを示しています。
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
例
この例は、要素にスクロールバーを追加した場合のclientHeight / clientWidthとoffsetHeight / offsetWidthの違いを示しています。
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";