ywork2020.com

Title

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

目次 (INDEX)

window.outerWidth とは

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

目次に戻る

window.outerWidth プロパティの概要

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

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

目次に戻る

構文

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

var intBrowserWidth = window.outerWidth;

目次に戻る

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

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

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

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

目次に戻る