The HTML onresize attribute is an event handler used to specify a script that will run when the browser window is resized.
Definition and Usage
➔ It is mainly used in the <body> element to dynamically adjust content for responsive design.
➔ The onresize attribute is part of the Window event attribute, so it is recommended to use addEventListener() on the window object instead of the inline HTML attribute.
➔ Although onresize is effective for browser windows, the event does not work for other arbitrary HTML elements. To detect resizing of any HTML element, it is recommended to use the more modern and powerful ResizeObserver API.
Syntax
//In HTML
<body onresize="myFunction()">
//In javascript (Recommended)
window.addEventListener("resize", myFunction);
//OR
window.addEventListener("resize", (event) => {
myFunction();
});
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML onresize Attribute Example</title>
<meta charset="utf-8" />
</head>
<body onresize="myFunction()">
<h2>HTML onresize Attribute Example</h2>
<p>Try to resize the browser window.</p>
<p id="mypara"></p>
<script>
function myFunction() {
let w = window.outerWidth;
let h = window.outerHeight;
let txt = "Window width=" + w + ", <br>Window height=" + h;
document.getElementById("mypara").innerHTML = txt;
}
//window.addEventListener("resize",myFunction());
</script>
</body>
</html>
Example
Resize a Specific Element and fire rezize event using ResizeObserver.
<!DOCTYPE html>
<html>
<head>
<title>HTML onresize Attribute Example</title>
<meta charset="utf-8" />
<style>
#myDIV {
width: 350px;
height: 100px;
overflow: auto;
}
</style>
</head>
<body>
<h2>HTML onresize Attribute Example</h2>
<p>Try changing the size of the border surrounding the div element.</p>
<p id="mypara"></p>
<div id="myDIV" width="300" height="300"></div>
<script>
document.getElementById("myDIV").style.resize = "both";
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
let w = entry.contentRect.width;
let h = entry.contentRect.height;
let txt = "Element width: " + w + "<br>Element height: " + h;
document.getElementById("mypara").innerHTML = 'Element resized <br>' + txt;
document.getElementById("myDIV").style.border = "2px dashed blue";
document.getElementById("myDIV").innerHTML = 'Element resized:' + "<br>Element width:" + w + "<br>Element width:" + h;
}
});
resizeObserver.observe(document.getElementById("myDIV"));
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.