HTML DOM Element clientHeight 属性

定義と使用方法

clientHeight 属性は要素の見える高さを返し、インデントを含みますが、ボーダーやスクロールバー、外縁マージンを含まないでピクセルで計算されます。

clientHeight 属性は読み取り専用です。

も参照してください：CSS フレームワーク教程

も参照してください：

clientWidth 属性

clientTop 属性

clientLeft 属性

offsetHeight 属性

offsetWidth 属性

要素にスクロールバーを追加するには、 CSS overflow プロパティ。

インスタンス

例 1

"myDIV" の高さと幅を取得します（インデントを含みます）：

const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";

実際に試してみる

例 2：clientHeight/clientWidth と offsetHeight/offsetWidth の違い

スクロールバーがありません：

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

実際に試してみる

スクロールバーがあります：

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

実際に試してみる

構文

element.clientHeight

返り値

タイプ 説明
数字 要素の見える高さ（ピクセルで計算）、インデントを含みます。

ブラウザのサポート

すべてのブラウザがサポートしています element.clientHeight：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート サポート サポート サポート サポート サポート