JavaScriptでWindowサイズを取得するinnerWidth・innerHeightプロパティの使い方

innerWidth()・innerHeight()プロパティの使い方

JavaScriptでブラウザ上でウィンドウサイズを取得するにはinnerWidth()メソッドとinnerHeight()プロパティを使います。

この値はアドレスバーやブックマーク、開発者ツールなどのスペースは含みません。

レスポンシブサイトが主流の現代のフロントデザインでは、画面の幅・高さを調べる機会は思ったより多いので習得しておきたいところです。

メソッド

メソッド意味返り値
window.innerWidthブラウザのビューポートの横幅を取得数値(px)
window.innerHeightブラウザのビューポートの縦幅を取得数値(px)
Windowサイズを取得するメソッド

サンプルコード

サンプルコードとして、ボタンを押すと、縦幅と横幅を出力するスクリプトを紹介します。

Output
Pug
button#button.mb-4 Button
 div#targetText
SCSS
#button {
	--background-color: #fff;
  --color: #576574;
	--transition: all .3s;
	margin-bottom: 10px;
  background-color: var(--background-color);
  padding: 10px;
  color: var(--color);
	border: 1px solid #576574;
  cursor: pointer;
  width: 120px;
	transition:  var(--transition);
	&:hover {
		transition: var(--transition);
		color: var(--background-color);
		background-color: var(--color);
	}
}
JavaScript
const targetText = document.getElementById('targetText');

// ボタンをクリックしたら予め用意していたonClickAction()関数を実行する
document.getElementById('button').addEventListener('click', onClickAction);

/** ボタンをクリックと関数を実行 */
function onClickAction() {
	const browserWidth = window.innerWidth;
	const browserHeight = window.innerHeight;
	targetText.textContent = `ブラウザのビューポートの幅は${browserWidth}pxで、高さは${browserHeight}pxです。`;
}
インストラクター
コメント

コメントを残す