HTML onresize Event Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

<!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>