しらべものドット宇宙HTMLコーダーが必死こいて〇〇〇を目指すブログ

【Javascript】ブラウザのウィンドウ幅と高さ、ページ描画領域の幅と高さを取得・表示させる。

結論(コード)

'use strict';
{
  // 表示画面の幅と高さを取得する。
  let iW = window.innerWidth;
  let iH = window.innerHeight;
  let oW = window.outerWidth;
  let oH = window.outerHeight;

  // それぞれ幅と高さを表示させる要素を取得する。
  const iwElem = document.querySelector('#iw');
  const ihElem = document.querySelector('#ih');
  const owElem = document.querySelector('#ow');
  const ohElem = document.querySelector('#oh');

  // それぞれ幅と高さをテキスト化する。
  const iwContent = document.createTextNode(iW);
  const ihContent = document.createTextNode(iH);
  const owContent = document.createTextNode(oW);
  const ohContent = document.createTextNode(oH);

  // テキストを上記要素に表示させる。
  iwElem.appendChild( iwContent );
  ihElem.appendChild( ihContent );
  owElem.appendChild( owContent );
  ohElem.appendChild( ohContent );
}

window.innerWidth と window.innerHeight で、ページ描画領域の幅と高さをそれぞれ取得する。

window.outerWidth と window.outerHeight で、ブラウザの幅と高さをそれぞれ取得する。

参考サイト:

マウスカーソルの絶対座標を取得
https://shanabrian.com/web/javascript/mouse-absolute-position.php

[JavaScript] マウスポインタの座標を取得する
https://javascript.programmer-reference.com/js-mousepointer-coordinate/

マウスカーソルの位置座標を取得する
https://gray-code.com/javascript/get-mouse-cursor-position-coordinate/