【JavaScript】ウィンドウの高さと幅を取得するやり方を解説します

JavaScript

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事では、 JavaScriptでウィンドウの高さと幅を取得するやり方について

  • ウィンドウの高さと幅を取得するために使うプロパティ
  • サンプルプログラム

と、丁寧に解説していきます。

前提条件:実行環境について

実行環境は以下の通りです。

OS Windows10

ウィンドウの高さと幅を取得するために使うプロパティとは

ウィンドウの高さと幅を取得するために使うプロパティとは

幅を取得するプロパティ window.innerWidth
高さを取得するプロパティ window.innerHeight

です。

使い方は

と使います。
返す値はウィンドウの幅をピクセル単位で返します。

図にすると以下になります。
innerWidthとinnerHeightはどこを取得するのかを図で解説
注意点として、window.innerHeightはブックマークバーを高さには含めないという点です。

では、次の章で実際に使ってみます。

ウィンドウの高さと幅を取得を解説するプログラムの概要

ウィンドウの高さと幅を取得をを解説するプログラムでは、

  • HTML
  • JavaScript

の2ファイルを使います。

ボタンを押すとウィンドウサイズを取得して表示します。
ボタンをクリックするとJavaScript関数を呼ぶやり方は、以下の記事をご参考ください。

フォルダ構成は以下のようになっています。
ウィンドウサイズを取得を解説するフォルダ構成

HTMLサンプルプログラム

HTMLで外部のJavaScriptを読み込むやり方は、以下の記事をご参考ください。

JavaScriptサンプルプログラム

  • getElementByIdメソッド
  • innerHTMLプロパティ

については、こちらの記事をご参考ください。

実行結果

作成したHTMLをブラウザで開き、【ウィンドウサイズを取得】ボタンを押します。

ウィンドウサイズを取得して表示できたことが確認できました。

ウィンドウの横幅:1135px
ウィンドウの高さ:496px

まとめ:ウィンドウの高さと幅を取得してみよう

以上がJavaScriptでウィンドウの高さと幅を取得するやり方についての解説でした。

あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ

コメント

タイトルとURLをコピーしました