ywork2020.com

Title

ブラウザの高さを取得する

目次 (INDEX)

window.outerHeight とは

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

目次に戻る

window.outerHeight プロパティの概要

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

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

目次に戻る

構文

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

var intBrowserHeight = window.outerHeight;

目次に戻る

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

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

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

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

目次に戻る