DOM Event - Resize

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: