【JavaScript】ブラウザのウィンドウの横幅と高さを取得する

2020年4月13日JavaScript

JavaScriptでブラウザのウィンドウの横幅と高さを取得する方法を記載します。

[サンプル]

ウィンドウサイズを変えると、表示される数値も変わります。

ウィンドウの横幅：
ウィンドウの高さ：

[index.html]

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    ウィンドウの横幅：<span id="width"></span><br>
    ウィンドウの高さ：<span id="height"></span>
    <script src="index.js"></script>
</body>
</html>

[index.js]

※ページ読み込み時とウィンドウサイズを変更したときの両方で表示される数値が変更されるようにした。

var width;
var height;
// ページ読み込み時の動作
window.addEventListener('load', function () {
    // ウィンドウの幅を取得
    width = document.documentElement.clientWidth;
    // 幅を画面に表示
    document.getElementById('width').innerText = width;
    // ウィンドウの高さを取得
    height = document.documentElement.clientHeight;
    // 高さを画面に表示
    document.getElementById('height').innerText = height;
}, false);

// ウィンドウのサイズ変更イベントの設定
window.addEventListener('resize', function () {
    // ウィンドウの幅を取得
    width = document.documentElement.clientWidth;
    // 幅を画面に表示
    document.getElementById('width').innerText = width;
    // ウィンドウの高さを取得
    height = document.documentElement.clientHeight;
    // 高さを画面に表示
    document.getElementById('height').innerText = height;
}, false);

JavaScript

Posted by ton