ywork2020.com

Title

要素の中身の横幅を取得する

目次 (INDEX)

scrollWidthとは

ここで説明するscrollWidth とは次の語句からなるjavascriptのプロパティです。
scroll
読み: スクロール
意味: 巻物、ディスプレーに映っている文字列や図形を上下左右に移動させること
width
読み: ウィズ
意味: 横幅

目次に戻る

scrollWidthプロパティの概要

このプロパティは、要素のコンテンツがあふれて画面に表示しきれない部分を含めた、 パディングボックスとコンテンツボックスの横幅の総和を求めます。

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

目次に戻る

構文

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

var elmScrollWidth = Element.scrollWidth;

目次に戻る

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

このサンプルではdiv要素のコンテンツに収まらないテキストをスクロールバーを使って表示できるようにしています。 このスクロールバーを使わないと見ることができない領域を含めた内部の横幅を取得します。

サンプルコード: CSS
<style>
	#idDiv{
		border: medium solid currentColor;
		background-color: ##ivory;
		padding: 1em;
		width: 100px;
		height: 100px;
		overflow: scroll;
		overflow-y: visible;
	}
</style>
  • 08: overflow (コンテンツが溢れる場合には、スクロールバーを表示します。)
サンプルコード: HTML
<body>
	<div id="idDiv">
		Welcome.ThankYouforVisitingYwork.
		WeLookForwardToWorkingWithYouInTheFuture.
	</div>
	結果:<br>
	<output id="idOutput">innerText</output>
</body>
  • 02-05: div (この要素の内部の横幅を取得します。)
  • 07: output (この要素に内部の横幅の取得結果を表示します。)
サンプルコード: script
<script>
	let elmDiv = document.getElementById("idDiv");
	let elmOutput = document.getElementById("idOutput");
	elmOutput.innerText = elmDiv.scrollWidth;
</script>
  • 04: 結果の出力 (div要素の内部の横幅をoutput要素のコンテンツに表示します。)
実行結果:
サンプル要素:
Welcome.ThankYouforVisitingYwork. WeLookForwardToWorkingWithYouInTheFuture.
結果:
innerText

目次に戻る