↑

DOM

：

ドキュメント オブジェクト モデル

：

Element.clientHeight プロパティ

　編集：2022.09.20 by T.A.

[Edge]。読取専用。→mdn

element のパディング領域を含む要素内容の高さを数値で返します。スクロール バー幅は含みません。

mdn： CSS のない要素やインライン レイアウト ボックスではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、ボーダー、マージン、（もしあれば）水平スクロール バーは含みません。

clientHeight は CSS height＋CSS padding－水平スクロール バーの高さ（もしあれば）として計算できます。

clientHeight がルート要素（<html> 要素）（または文書が後方互換モードである場合は <body>）に使用された場合、（スクロールバーを除いた）ビューポートの高さが返されます。これは clientHeight の特例です。

注： このプロパティは値を整数値に丸めます。小数値が必要であれば、element.getBoundingClientRect() を使用してください。

構文
element.clientHeight
element Element オブジェクト。
値

ピクセル単位で表す整数値です。

例

HTML： 

<DIV id=IdDiv style="
  margin:10px;
  width:100px;
  height:100px;
  border:10px solid red;
  padding:10px;
  background-color:#ddd;
  overflow:scroll;
">DIV要素</DIV>

JavaScript： 

D=IdDiv.clientHeight; //＝103

HTMLの表示結果：

DIV要素

HTML： 

<DIV id=IdDiv style="
  margin:10px;
  width:100px;
  height:100px;
  border:10px solid red;
  padding:10px;
  background-color:#ddd;
  overflow:scroll;
  box-sizing:border-box; /* width、height の解釈を変更 */
">DIV要素</DIV>

JavaScript： 

D=IdDiv.clientHeight; //＝63

HTMLの表示結果：

DIV要素
テスト
HTML：


ここにHTMLが表示される
⯈スクリプト組み込み：
JavaScript：


JavaScript：



表示内容：
表示内容：