ウィンドウの幅と高さを取得する – propansystem プロパンシステム

ウィンドウサイズの取得

javascriptでウィンドウサイズを取得する方法を試してみます。

ウィンドウサイズの取得は、windowオブジェクトのinnerWidth、innerHeightプロパティを使います。

innerWidthはウィンドウの内部の幅を取得し、
innerHeightはウィンドウの内部の高さを取得します。

実際に下記のサンプルを書いて動作させてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>

<div>
	<div>ウィンドウサイズ X軸：<span id="x1"></span></div>
	<div>ウィンドウサイズ Y軸：<span id="y1"></span></div>
	</div>
</div>

<script type="text/javascript">
// ウィンドウ取得
let window_test = window;

// リサイズされたらメソッド「output_log_resize」を呼ぶ
window.addEventListener('resize', output_log_resize);

// スクロール位置(X座標、Y座標)を出力する
function output_log_resize()
{
	// x座標出力用の要素を取得
	let x1 = document.getElementById("x1");
	let y1 = document.getElementById("y1");

	// 要素を更新する
	x1.innerHTML = window_test.innerWidth;
	y1.innerHTML = window_test.innerHeight;

	console.log("window pageXOffset -> " + window_test.pageXOffset);
	console.log("window pageYOffset -> " + window_test.pageYOffset);
}

</script>

</body>
</html>

サーバ上のHTMLはこちら(test1.html)

アクセスしてウィンドウの幅や高さを変えたタイミングでウィンドウ内部の幅と高さを取得できています。
ただし、このプロパティは読み取り専用なので、ウィンドウの幅を変更することはできないので、
ウィンドウサイズを変更するには別なメソッドを使う必要があります。

ウィンドウサイズの取得

コメントを残す