HTML onresize Event Attribute

Description

The onresize HTML event attribute is triggered when the browser window is resized. It can be used to perform actions such as updating the layout of the page, resizing images, or showing or hiding elements.

The onresize attribute can be used on any HTML element, but it is most commonly used on the <body> element. This is because the <body> element represents the entire document, so resizing the browser window will also resize the <body> element.

To use the onresize attribute, simply add it to the HTML element you want to listen for resize events on. The value of the onresize attribute should be a JavaScript function that will be executed when the element is resized.

For example, the following code will execute the myFunction() function when the browser window is resized:

<body onresize="myFunction()">
  ...
</body>

The myFunction() function can then be used to perform any actions that you want to take when the browser window is resized. For example, the following function will update the width of a div element to match the width of the browser window:

function myFunction() {
  var div = document.getElementById("myDiv");
  div.style.width = window.innerWidth + "px";
}

The onresize event attribute is a powerful tool that can be used to create dynamic and responsive web pages. It is especially useful for pages that need to be displayed on different devices with different screen sizes.

Syntax

<element onresize="script">

Values

  • scriptThe name of the script to use when the event has been triggered.

Example

<!DOCTYPE HTML>
<html>
<body onresize="myFunction()">

<p>Try resizing your browser window.</p>

<script>
function myFunction() {
alert("EXAMPLE: You have resized the browser window.");
}
</script>

</body>
</html>

Browser Support

The following table will show you the current browser support for the HTML onresize Event Attribute.

Desktop
Edge Chrome Firefox Opera Safari
YesYesYesYesYes
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
YesYesYesYesYesYes

Last updated by CSSPortal on: 14th October 2023