HTML DOM Element offsetHeight 属性

定義と使用法

offsetHeight 属性は、外縁マージンを含まない（ピクセル単位）で、インラインスペース、ボーダー、スクロールバーを含む要素の視覚的な高さを返します。

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

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

offsetParent

すべてのブロックレベル要素は、オフセット親に対してオフセット量を報告します：

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

オフセット親とは、非静的位置を持つ最も近い祖先を指します。

オフセット親が存在しない場合、オフセットはドキュメント本文に対して相対的です。

も参照してください：

offsetWidth 属性

offsetParent 属性

offsetTop 属性

offsetLeft 属性

clientTop 属性

clientLeft 属性

clientWidth 属性

clientHeight 属性

例

例 1

表示 "myDIV" の高さと幅、インラインスペースとボーダーを含めて：

const elmnt = document.getElementById("myDIV");
let text = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

実際に試してみる

例 2

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.offsetHeight

返り値

タイプ 説明
数字 要素の視覚的な高さ（ピクセル単位）、内側マージン、枠線、スクロールバーを含みます。

ブラウザのサポート

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

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