結論(コード)
'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/