ブラウザのウィンドウや要素のサイズ（width、height）が変更されたとき、その値を動的に取得します。なお、jQueryとVanilla JS（素のJavaScriptのことです。以下単にJavaScriptと呼称します。）の結果でブラウザのウィンドウのwidthが違って表示されますが、これは、前者の"width()"メソッドがウィンドウのコンテンツ領域の幅を返すのに対して、後者の"window.innerWidth"メソッドがブラウザのウィンドウの内側の幅（スクロールバーを含む）を返すためです。

● (1)ブラウザのウィンドウリサイズの動的確認【 jQueryの$(window).resize()メソッドを使用 】

ブラウザのウィンドウのサイズを変更（ブラウザの右下隅をドラッグして）すると、その値を下側の[変更サイズ]欄に表示します。なお、下側のVanilla JSを使ったサンプルも同時に動作します。

(1)のscript

$(window).resize(function() {
  const windowHeight = $(window).height(); // ブラウザウィンドウの高さを取得
  const windowWidth = $(window).width(); // ブラウザウィンドウの幅を取得
  $("#hw1").text("ウィンドウの高さ：" + windowHeight + "px　ウィンドウの幅：" + windowWidth + "px");
});

 

● (2)ブラウザのウィンドウリサイズの動的確認【 JavaScriptのaddEventListenerを使用 】

jQueryを使った場合と同じく、ブラウザのウィンドウのサイズを変更すると、その値を下側の[変更サイズ]欄に表示します。冒頭に記述したようにこちらのほうの幅が少し大きくなります。

(2)のscript

window.addEventListener('resize', function() {
  const windowHeight2 = window.innerHeight; // ブラウザウィンドウの高さを取得
  const windowWidth2 = window.innerWidth; // ブラウザウィンドウの幅を取得
  document.getElementById("hw2").innerHTML = "ウィンドウの高さ：" + windowHeight2 + "px　ウィンドウの幅：" + windowWidth2 + "px";
});

● (3) 要素のサイズ変更の動的確認【 jQueryでsetInterval関数を使用 】

次のダミーのdiv要素（初期値: 高さ85px、幅285px）の右下をドラッグしてサイズを変更すると、その値を下側の[変更サイズ]欄に表示します。なお、jQueryの場合は、スクロールバー部分のサイズを含みません。このコードでは、setInterval関数を使用して100ミリ秒ごとに要素のサイズを取得しています。

(3)のscript

$(function() {
  const $resizable = $('#dum1');
  const initialWidth = $resizable.width();
  const initialHeight = $resizable.height();
  const intervalId = setInterval(function() {
    const currentWidth = $resizable.width();
    const currentHeight = $resizable.height();
    if (currentWidth !== initialWidth || currentHeight !== initialHeight) {
      $('#hw3').text("要素の高さ：" + currentHeight + "px　要素の幅：" + currentWidth + "px");
    }
  }, 100);
});

 

● (4) 要素のサイズ変更の動的確認【 JavaScriptでsetInterval関数を使用 】

(3)のjQueryの場合と同じダミーのdiv要素を使い、土曜の動作でその値を下側の[変更サイズ]欄に表示します。なお、JavaScriptの場合は、スクロールバー部分のサイズを含んだ値になります。。コードも同じくsetInterval関数を使用して100ミリ秒ごとに要素のサイズを取得しています。

(4)のscript

window.addEventListener('load', function() {
  const resizable = document.getElementById('dum2');
  const initialWidth = resizable.offsetWidth;
  const initialHeight = resizable.offsetHeight;
  const intervalId = setInterval(function() {
    const currentWidth = resizable.offsetWidth;
    const currentHeight = resizable.offsetHeight;
    if (currentWidth !== initialWidth || currentHeight !== initialHeight) {
      document.getElementById('hw4').textContent = `要素の高さ： ${currentHeight}px,　要素の幅： ${currentWidth}px`;
    }
  }, 100);
});