We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

The GlobalEventHandlers.onresize property contains an EventHandler triggered when a resize event is received.

Syntax

window.onresize = funcRef;

Parameters

  • funcRef is a reference to a function.

Example

window.onresize = doFunc;
<html>
<head>

<title>onresize test</title>

</head>

<body>
<p>Resize the browser window to fire the resize event.</p>

<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>

<script type="text/javascript">
  var heightOutput = document.querySelector('#height');
  var widthOutput = document.querySelector('#width');

  function resize() { 
    heightOutput.textContent = window.innerHeight;
    widthOutput.textContent = window.innerWidth;
  }

  window.onresize = resize;
</script>
</body>
</html>

Notes

The resize event is fired after the window has been resized.

Specification

Specification Status Comment
HTML Living Standard
The definition of 'onresize' in that specification.
Living Standard  

Document Tags and Contributors

Tags: 
Last updated by: Garbee,