DOM Event - Resize

Table of Contents

About

The resize event occurs when the window is resized.

Example

  • The HTML with an explanation and two nodes that will be updated with the with and height respectively.
<p>Resize the browser window to fire the <mark>resize</mark> event.</p>
<p>Window width: <span id="width"></span></p>
<p>Window height: <span id="height"></span></p>
  • The Javascript that selects the width and height node and update them with the innerWidth and innerHeight value
const heightOutput = document.querySelector('#height');
const widthOutput = document.querySelector('#width');
heightOutput.textContent = parent.window.innerHeight;
widthOutput.textContent = parent.window.innerWidth;
  • The Javascript that updates dynamically the value with an event listener callback.
parent.window.addEventListener('resize', function() {
  heightOutput.textContent = parent.window.innerHeight;
  widthOutput.textContent = parent.window.innerWidth;
});
  • The output:

Powered by ComboStrap