window.innerWidth とは
- ここで説明する window とは次の語句からなる JavaScript のグローバル変数であり、Window オブジェクトを参照します。
- window
- 読み: ウィンドウ
意味: 窓
- ここで説明する innerWidth とは次の語句からなる JavaScript のプロパティです。
- inner
- 読み: インナー
意味: 内的 - width
- 読み: ウィズ
意味: 幅
window.innerWidth プロパティの概要
このプロパティは、ブラウザウィンドウの内的な横幅を読み取り専用のピクセル値として取得します。
Window オブジェクトは window 変数から参照します。 なお、window はグローバル変数であり、コードには window を省略してプロパティから記述することができます。
構文
サンプルを見る前に構文を確認しておきます。
var intViewportWidth = window.innerWidth;サンプルコードと実行結果
ここでは、このブラウザのウィンドウの横幅を取得して表示しています。
横幅の取得はページの構成が完了した時点と、ユーザーがブラウザのウィンドウを調整した時点で行っています。
サンプルコード: 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.innerWidth + " px";
}
document.addEventListener("DOMContentLoaded", funcWindowWidth);
window.addEventListener("resize", funcWindowWidth);
</script>
- 02: elmOutput (idOutput の識別子をもつ要素を HTMLElement として取得したものです。)
- 03-05: funcWindowWidth() (自作関数です。elmOutput のコンテンツに window.innerWidth の値を出力します。)
- 06: document.addEventListener("DOMContentLoaded", Handler) (document の DOMContentLoaded イベントに funcWindowWidth 関数をアタッチしています。)
- 07: window.addEventListener("resize", Handler) (window の resize イベントに funcWindowWidth 関数をアタッチしています。)