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

JavaScriptのonresizeイベントとは？ウィンドウサイズを取得する方法とサンプルコード

onresizeイベントの基本

リサイズ（resize）イベントは、ブラウザのウィンドウサイズが変更されたときに発生するイベントです。このイベントを利用すると、ユーザーがウィンドウを拡大・縮小したタイミングを検知し、それに応じた処理を実行できます。

リサイズ後のウィンドウサイズを取得するには、JavaScriptのwindow.outerWidth（ウィンドウの幅）とwindow.outerHeight（ウィンドウの高さ）プロパティを使用します。

サンプルコード

以下のコードを実行すると、onresizeイベントの動作を実際に確認できます。ブラウザのウィンドウをリサイズするたびに、最新のウィンドウの幅と高さが画面に表示されます。

<!DOCTYPE html>
<html>
    <head>
        <script>
            function resizeFunction() {
                var val = "ウィンドウの幅=" + window.outerWidth + "、ウィンドウの高さ=" + window.outerHeight;
                document.getElementById("test").innerHTML = val;
            }
        </script>
    </head>
    <body onresize="resizeFunction()">
        <p>ブラウザのウィンドウをリサイズして、ウィンドウ（ブラウザ画面）の高さと幅の変化を確認してみましょう。</p>
        <p id="test"></p>
    </body>
</html>

addEventListenerを使った別の書き方

HTML属性のonresizeを使う代わりに、addEventListener()メソッドでイベントを登録する方法もあります。こちらの方が柔軟に複数のイベント処理を管理できるため、実務ではよく使われます。

window.addEventListener("resize", resizeFunction);

まとめ

onresizeイベントを活用すれば、ウィンドウサイズの変化に応じてレイアウトの調整や要素の再描画など、動的な処理を簡単に実装できます。window.outerWidthとwindow.outerHeightを組み合わせることで、リサイズ後の正確なウィンドウサイズを取得できる点も覚えておきましょう。

  1. JavaScriptのclientXマウスイベントとは？マウスポインタのX座標を取得する方法

    マウスイベントが発生した際に、clientXプロパティを使用すると、マウスポインタの水平方向（X軸）の座標を取得できます。この座標は、現在表示されているウィンドウ（ビューポート）の左上を原点とした相対的な位置を表します。clientXの基本的な役割clientXはMouseEventオブジェクトの読み取り専用プロパティで、クリックやマウス移動などのイベントが起こった瞬間のポインタの横位置をピクセル単位の数値として返します。縦方向の座標を取得したい場合は、対となるclientYプロパティを使用します。実装例以下のコードを実行して、JavaScriptでclientXマウスイベントを実装する方法を

  2. JavaScriptのevery()メソッドとは？使い方とサンプルコードをわかりやすく解説

    JavaScriptの配列（Array）メソッドである every() は、配列内のすべての要素が、指定した関数によるテスト条件を満たしているかどうかを判定するメソッドです。 判定結果はブール値（真偽値）として返されます。 すべての要素が条件を満たす場合 → true 1つでも条件を満たさない要素がある場合 → false every()メソッドのパラメータ every()メソッドでは、以下の2つの引数を使用できます。 callback − 各要素に対して実行されるテスト用の関数です。この関数が false を返すと、その時点で処理が中断され、every()全体が false を返します