ywork2020.com

Title

ブラウザウィンドウの横幅を取得する

目次 (INDEX)

window.innerWidth とは

ここで説明する window とは次の語句からなる JavaScript のグローバル変数であり、Window オブジェクトを参照します。
window
読み: ウィンドウ
意味: 窓
ここで説明する innerWidth とは次の語句からなる JavaScript のプロパティです。
inner
読み: インナー
意味: 内的
width
読み: ウィズ
意味: 幅

目次に戻る

window.innerWidth プロパティの概要

このプロパティは、ブラウザウィンドウの内的な横幅を読み取り専用のピクセル値として取得します。

Window オブジェクトは window 変数から参照します。 なお、window はグローバル変数であり、コードには window を省略してプロパティから記述することができます。

目次に戻る

構文

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

var intViewportWidth = window.innerWidth;

目次に戻る

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

ここでは、このブラウザのウィンドウの横幅を取得して表示しています。

横幅の取得はページの構成が完了した時点と、ユーザーがブラウザのウィンドウを調整した時点で行っています。

サンプルコード: HTML
<body>
	<output id="idOutput"> innerText </output>
	<script>...</script>
</body>
  • 02: output id="idOutput" (結果を出力するための要素です。)
サンプルコード: script
<script>
	let elmOutput = document.getElementById("idOutput");
	function funcWindowWidth(){
		elmOutput.innerText = window.innerWidth + " px";
	}
	document.addEventListener("DOMContentLoaded", funcWindowWidth);
	window.addEventListener("resize", funcWindowWidth);
</script>
  • 02: elmOutput (idOutput の識別子をもつ要素を HTMLElement として取得したものです。)
  • 03-05: funcWindowWidth() (自作関数です。elmOutput のコンテンツに window.innerWidth の値を出力します。)
  • 06: document.addEventListener("DOMContentLoaded", Handler) (document の DOMContentLoaded イベントに funcWindowWidth 関数をアタッチしています。)
  • 07: window.addEventListener("resize", Handler) (window の resize イベントに funcWindowWidth 関数をアタッチしています。)
実行結果:
innerText

目次に戻る