最新のWeb開発のチュートリアル
 

HTML DOM offsetHeight Propery

<Elementオブジェクト

高さと幅を取得<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";

TXTの結果は次のようになります。

Height with padding and border: 280px
Width with padding and border: 430px
»それを自分で試してみてください

もっと"Try it Yourself"以下の例。


定義と使用法

offsetHeightプロパティが閲覧可能なパディング、ボーダーやスクロールバーなどのピクセル単位での要素の高さではなく、マージンを返します。

理由は"viewable"要素の内容は、要素の実際の高さよりも背が高い場合は、のみ表示され、高さを返します。このプロパティがあるためワードが指定されているが、ある(See "More Examples")

注意:このプロパティを理解するために、あなたは理解しなければならないCSSボックスモデルを

ヒント:このプロパティは、しばしば一緒に使用されているoffsetWidthプロパティ。

ヒント:使用clientHeightclientWidthだけパディングを含め、要素の閲覧可能な高さと幅を返すためのプロパティを。

ヒント:CSSの使用、要素にスクロールバーを追加するには、オーバーフロープロパティを。

このプロパティは読み取り専用です。


ブラウザのサポート

プロパティ
offsetHeight はい はい はい はい はい

構文

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";

TXTの結果は次のようになります。

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
»それを自分で試してみてください

我々は要素にスクロールバーを追加すると、この例では、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";

TXTの結果は次のようになります。

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
»それを自分で試してみてください

<Elementオブジェクト