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:
