ywork2020.com

Title

要素の全水平幅を取得する

目次 (INDEX)

offsetWidthとは

ここで説明するoffsetWidth とは次の語句からなるjavascriptのプロパティです。
offset
読み: オフセット
意味: 埋め合わせる、相殺する、補う、補正、補正値
width
読み: ウィズ
意味: 幅

目次に戻る

offsetWidthプロパティの概要

このプロパティは、要素がブラウザで表示される全水平幅の値を整数のピクセル値で取得することができます。 ここで言っている全水平幅とは、境界線とパディングとコンテンツボックスの水平幅を合計した値のことです。 なお、垂直スクロールバーが表示されている場合は、その水平幅も含みます。

このプロパティは読み取り専用です。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var intElementOffsetWidth = element.offsetWidth;

目次に戻る

サンプルコードと実行結果

ここでは、予め div要素 にCSSで要素の表示幅を設定しています。 この要素のoffsetWidthの値を要素のコンテンツに書き出すようにしてみました。

サンプルコード: CSS
<style>
	#idDiv{
		font-size: 2em;
		box-sizing: content-box;
		background-clip: content-box;
		background-color: ##lightblue;
		border-color: ##gray;
		border-style: solid;
		border-width: 5px;
		margin: 3px;
		padding: 10px;
		width: 80px;
	}
</style>
  • 02: box-sizing (content-box は初期値です。これは width の設定値がコンテンツボックスの横幅に適用されます。)
  • 08: border-width (境界線の幅です。5pxに設定しています。)
  • 09: margin (要素の外周の余白です。3pxに設定しています。)
  • 10: padding (要素の内周の余白です。10pxに設定しています。)
  • 11: width (ここではコンテンツボックスの水平幅です。80pxに設定しています。)
サンプルコード: HTML
<body>
	<div id="idDiv"></div>
</body>
  • 02: div (ブロックコンテナー要素です。この要素の全幅の値を取得します。)
サンプルコード: script
<script>
	let elmDiv = document.getElementById("idDiv");
	elmDiv.innerText = elmDiv.offsetWidth;
</script>
  • 02: elmDiv (識別子=idDivの要素をElementオブジェクトとして取得します。)
  • 03: .innerText = .offsetWidth (elmDivのinnerTextにoffsetWidthの値を代入します。)
実行結果:

結果を見ると という値が要素のコンテンツに書き出されています。 これはCSSで設定した (border-width×2 + padding×2) + width = offsetWidth という結果になっていることが分かります。

目次に戻る