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

JavaScriptでクロスブラウザ対応のウィンドウリサイズイベントを取得する方法

JavaScriptでウィンドウのサイズ変更（リサイズ）イベントを検知するには、addEventListener()メソッドを使用します。このメソッドはすべての主要ブラウザ（Chrome、Firefox、Safari、Edgeなど）でサポートされており、クロスブラウザ環境でも安定して動作するのが特徴です。

resizeイベントの基本的な使い方

windowオブジェクトに対してaddEventListener('resize', 関数名)を指定すると、ユーザーがブラウザのウィンドウサイズを変更するたびに、登録した関数が自動的に呼び出されます。以下のコードでは、現在のウィンドウの幅と高さをリアルタイムに画面へ表示しています。

サンプルコード

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      margin-top: 10px;
      padding: 10px;
      background-color: #1E9E5D;
      width: 50%;
    }
    span {
      font-size: 50px;
    }
  </style>
  <script>
    window.addEventListener('resize', display);

    function display() {
      document.querySelector('.width').innerText = document.documentElement.clientWidth;
      document.querySelector('.height').innerText = document.documentElement.clientHeight;
    }

    display();
  </script>
</head>
<body>
  <div>
    <span>Width= <span class="width"></span></span><br />
    <span>Height= <span class="height"></span></span>
  </div>
</body>
</html>

コードの解説

  • window.addEventListener('resize', display)：ウィンドウがリサイズされるたびにdisplay関数を実行します。
  • document.documentElement.clientWidth / clientHeight：スクロールバーを除いた表示領域の幅と高さを取得します。
  • display()の初回呼び出し：ページ読み込み直後にも現在のサイズを表示できるように、関数を一度実行しています。

clientWidthとinnerWidthの違い

ウィンドウサイズの取得には、window.innerWidthやwindow.innerHeightを使う方法もあります。innerWidthはスクロールバーを含んだウィンドウ全体の幅を返すのに対し、clientWidthはスクロールバーを除いた実際のコンテンツ表示領域の幅を返します。用途に応じて使い分けるとよいでしょう。

パフォーマンスに関する注意点

resizeイベントは、ドラッグ中など短時間に何度も連続して発生します。重い処理を直接実行すると動作が遅くなるため、setTimeoutやrequestAnimationFrameを使ったデバウンス処理を組み合わせるのがベストプラクティスです。

  1. JavaScriptのwindow.locationとは？Locationオブジェクトの主なプロパティを徹底解説

    window.locationとは Window.locationは読み取り専用のプロパティで、現在表示しているドキュメントのURL情報を保持するLocationオブジェクトを返します。 Locationインターフェースは、そのオブジェクトがリンクされている場所（URL）を表します。locationオブジェクトには、以下のような便利なプロパティが用意されています。 locationオブジェクトの主なプロパティ一覧 location.href URL全体を含む文字列（DOMString）です。この値を変更すると、関連付けられたドキュメントが新しいページへ遷移します。また、関連ドキュメントとは

  2. JavaScriptの型強制（Type Coercion）とは？仕組みを初心者向けにわかりやすく解説

    型強制（Type Coercion）とは、あるデータ型が自動的・暗黙的に別のデータ型へと変換される仕組みのことです。JavaScriptは動的型付け言語であり、開発者が明示的に型を指定しなくても、状況に応じて値の型が自動的に変換されます。特に注意が必要なのが「+」演算子です。片方が文字列の場合、数値は文字列に変換されて文字列の連結として処理されます。一方、「-」「*」「/」などの算術演算子では、文字列は数値へ変換されるため、挙動の違いを理解しておくことが重要です。以下に、JavaScriptにおける型強制の動作を確認できるサンプルコードを示します。サンプルコード<!DOCTYPE htm