JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのwindow.innerWidth・innerHeightプロパティとは？使い方をわかりやすく解説

JavaScriptのwindow.innerWidthプロパティはブラウザウィンドウのコンテンツ領域（ビューポート）の幅を、window.innerHeightプロパティはコンテンツ領域の高さをそれぞれピクセル単位で取得します。スクロールバーやツールバーなど、ブラウザUIの一部は含まれず、あくまでページが表示されている領域のサイズが返される点に注意しましょう。

これらのプロパティは、レスポンシブ対応の処理や要素の動的な配置計算など、ウィンドウサイズに応じた挙動を実装したい場合に非常に便利です。

window.innerWidthとinnerHeightのサンプルコード

以下は、ボタンをクリックすると現在のウィンドウの内寸（幅と高さ）を画面に表示するシンプルな例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Window innerWidth / innerHeight のデモ</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>Window innerWidth / innerHeight プロパティ</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">ここをクリック</button>
<h3>
上のボタンをクリックすると、ウィンドウのinnerWidthとinnerHeightの値が表示されます。
</h3>
<script>
    let resEle = document.querySelector(".result");
    document.querySelector(".Btn").addEventListener("click", () => {
        resEle.innerHTML = "window.innerWidth = " + window.innerWidth + '<br>';
        resEle.innerHTML += "window.innerHeight = " + window.innerHeight + '<br>';
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、まず次のような画面が表示されます。

JavaScriptのwindow.innerWidth・innerHeightプロパティとは？使い方をわかりやすく解説

「ここをクリック」ボタンを押すと、その時点でのウィンドウの幅と高さが出力されます。

JavaScriptのwindow.innerWidth・innerHeightプロパティとは？使い方をわかりやすく解説

補足：outerWidth / outerHeightとの違い

似たプロパティにwindow.outerWidthとwindow.outerHeightがあります。こちらはタブバーやアドレスバーなどブラウザ全体の外枠を含むサイズを返します。「ページが実際に使える領域」を知りたい場合はinnerWidth・innerHeightを使い、「ブラウザウィンドウ全体のサイズ」が必要な場合はouterWidth・outerHeightを使うと覚えておくと良いでしょう。

  1. JavaScriptでプロパティを共有する方法 ― prototype活用のコード例と解説

    JavaScriptでは、オブジェクトのprototypeプロパティに値を追加することで、プロパティを複数のインスタンス間で共有できます。prototypeに登録されたプロパティは、そのコンストラクタから生成されたすべてのインスタンスから共通して参照されます。 この手法には大きなメリットがあります。各インスタンスごとに同じ値のプロパティを個別に定義する必要がないため、コードの重複を減らし、メモリの使用量も抑えられるのです。たとえば、学校名のように全生徒で共通する情報は、prototypeにまとめておくのが理想的です。 実装例：prototypeでプロパティを共有するコード 以下は、JavaS

  2. JavaScriptで既存のオブジェクトにプロパティとメソッドを追加する方法

    JavaScriptのオブジェクトは動的な性質を持っており、一度作成した後でも、いつでも新しいプロパティやメソッドを追加できます。最もシンプルな方法は、ドット記法（オブジェクト名.プロパティ名）を使って値を代入することです。プロパティに関数を代入すれば、それがそのままメソッドとして機能します。 基本的な書き方 object.newProperty = value; object.newMethod = function() {   // 処理 }; サンプルコード 以下は、既存の student オブジェクトにプロパティとメソッドを追加し、その内容を画面に表示する完全な例で