HTML DOM clientHeight プロパティ
要素オブジェクト例
div 要素の高さを取得します（パディングを含む）:
var elmnt = document.getElementById("myDIV");
var txt = "div 要素の高さ（パディングを含む）:" + elmnt.clientHeight + "px<br>";
txt += "div 要素の幅（パディングを含む）:" + elmnt.clientWidth + "px";
試してみる »
定義と用法
clientHeight プロパティは読み取り専用プロパティで、その要素のピクセル単位の高さを返します。高さにはパディング（padding）が含まれ、ボーダー（border）、マージン（margin）、スクロールバーは含まれません。整数で、単位はピクセル (px) です。
clientHeight は、CSS の height + CSS の padding - 水平スクロールバーの高さ（存在する場合）で計算できます。
document の body オブジェクトの場合、要素の CSS 高さの代わりに総コンテンツ高を含みます。フロート要素が下方向に広がるコンテンツの高さは無視されます。
注意：このプロパティを理解するには、次を参照してください：CSS ボックスモデル。
ヒント：このプロパティは通常、clientWidthプロパティと一緒に使用します。
ヒント：使用する： offsetHeightとoffsettWidthプロパティは、パディング（padding）とボーダー（border）を含む要素の表示高さと幅を返します。
ヒント：要素にスクロールバーを追加するには、overflowプロパティを使用できます。
これは読み取り専用プロパティです。
ブラウザサポート
| プロパティ | |||||
|---|---|---|---|---|---|
| clientHeight | Yes | Yes | Yes | Yes | Yes |
構文
element.clientHeight
技術詳細
| 戻り値： | その要素のピクセル高さを表す整数を返します。 |
|---|
その他の例
例
次の例では、clientHeight/clientWidth と offsetHeight/offsetWidth プロパティの違いを示します:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "高さ（パディングを含む）:" + elmnt.clientHeight + "px<br>";
txt += "高さ（パディングとボーダーを含む）:" + elmnt.offsetHeight + "px<br>";
txt += "幅（パディングを含む）:" + elmnt.clientWidth + "px<br>";
txt += "幅（パディングとボーダーを含む）:" + elmnt.offsetWidth + "px";
試してみる »
例
次の例では、要素にスクロールバーを追加した後の clientHeight/clientWidth と offsetHeight/offsetWidth プロパティの違いを示します:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "<b>div のスタイル情報:</b><br>";
txt += "高さ（パディングを含む）:" + elmnt.clientHeight + "px<br>";
txt += "高さ（パディング、ボーダー、スクロールバーを含む）:" + elmnt.offsetHeight + "px<br>";
txt += "幅（パディングを含む）:" + elmnt.clientWidth + "px<br>";
txt += "幅（パディング、ボーダー、スクロールバーを含む）:" + elmnt.offsetWidth + "px";
試してみる »
その他の拡張