HTML DOM Element offsetWidth 属性

定義と使用方法

offsetWidth 属性は、パディング、ボーダー、スクロールバーを含む（ピクセル単位で）視覚的な幅を返しますが、マージンは含まれません。

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

参照もしてください：CSS フレームワークのチュートリアル

offsetParent

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

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

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

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

参照もしてください：

offsetHeight 属性

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

返り値

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

ブラウザのサポート

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

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