In this section, we will learn what the window resizeBy() method is and how to use it in JavaScript.
JavaScript Window resizeBy() Method
If we want to programmatically change the size (width and height) of a browser window, we can use the resizeBy() method.
Basically, this method takes two arguments that declare the width and height of the current browser window.
The `resizeBy()` method has the same purpose as the `resizeTo()` method, but there’s a difference between the two methods:
- The `resizeTo()` method will change the size of the target window without concerning about the current size.
- On the other hand, the `resizeBy()` method works relative. For example, if the current size of a browser window is (100,100) and we call this method with the value `resizeBy(200, 200)`, the width and height here will be added to the current size of the browser window. So, in this example, the final size of the browser becomes: (300, 300);
Window resizeBy() Method Syntax:
resizeBy(width, height)
Window resizeBy() Method Parameter:
This method takes two arguments:
- The first argument declares how many CSS pixels the width of the window should be.
- The second argument specifies the height of the window again in CSS pixels.
Notes:
- By default, the browsers might disable the ability to resize a browser window and so you might not be able to see a result from calling the method.
- Usually when we create a new window from calling the `open()` method, we’re able to resize the created window.
Window resizeBy() Method Return Value:
The method does not return a value.
Example: using Window resizeBy() method in JavaScript
<!DOCTYPE html>
<html>
<head>
<title>JS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h3>Output:</h3>
<p id = "link"></p>
<script>
let winx = window.open(String.raw`G:\hack\javascript\my-javascript-tutorial-article-based\223-JavaScript window resizeBy()\example.html`,
"window",
"height=200,width=200,top=30,left=30,resizable=yes");
</script>
</body>
</html>
The second file:
<!DOCTYPE html>
<html>
<head>
<title>JS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
var x = 100, y = 100;
setTimeout(()=>{
setInterval(()=>resizeBy(x++,y++),150);
},2000);
</script>
</body>
</html>
