HTMLDOM要素clientHeight
❮要素オブジェクト例
パディングを含む「myDIV」の高さと幅を取得します。
const elmnt = document.getElementById("myDIV");
let text = "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px";
以下のその他の例。
定義と使用法
clientHeight
プロパティは、パディングを含む要素の表示可能な高さをピクセル単位で返しますが、境界線、スクロールバー、またはマージンは返しません。
clientHeight
プロパティは読み取り専用です。
構文
element.clientHeight
戻り値
タイプ | 説明 |
番号 | パディングを含む要素の表示可能な高さ(ピクセル単位) |
clientHeight / clientWidthとoffsetHeight / offsetWidthの違い
スクロールバーなし:
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";
スクロールバー付き:
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";
ブラウザのサポート
element.clientHeight
すべてのブラウザでサポートされています:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
❮要素オブジェクト