[JS] ウィンドウのサイズを取得する

2023年1月22日

JavaScriptでウィンドウの大きさを変えたことを検知し、幅や高さを取得する方法です。こちらのサンプルでは、ブラウザの大きさを変えるたびにサイズを表示・更新することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
</head>
<body>
<div>
    <!-- 幅の表示 -->
    <div id="w">0</div>
    <!-- 高さの表示 -->
    <div id="h">0</div>
</div>
<script>
    function resizeWindow(){
        // ウィンドウの幅
        let window_w = window.innerWidth;
        // ウィンドウの高さ
        let window_h = window.innerHeight;
        // 値を更新
        document.getElementById('w').innerHTML = String(window_w);
        document.getElementById('h').innerHTML = String(window_h);
    }
    // ウィンドウがリサイズされたら resizeWindow を実行
    window.addEventListener('resize', resizeWindow);
</script>
</body>
</html>

ウィンドウのサイズが変更されたときを検知するには window.addEventListener で resize を指定します。リサイズされたときに実行する関数を指定すると、ウィンドウサイズが変わるたびに呼び出すことができます。

// ウィンドウがリサイズされたら resizeWindow を実行
window.addEventListener('resize', resizeWindow);

ウィンドウの幅は window.innerWidth、高さは window.innerHeight で取得します。

// ウィンドウの幅
let window_w = window.innerWidth;
// ウィンドウの高さ
let window_h = window.innerHeight;

JavaScript,プログラミングJavaScript

Posted by kidatti