Window resizeBy() 方法

实例

打开一个新窗体，并相对于其当前位置调整宽度和高度 250px:

<!DOCTYPE html>
<html>
<body>
<p>打开一个新窗体，并将宽度和高度调整为 250px:</p>
<p><b>提示:</b> 多次按下 "调整窗体大小"（每次按下窗体将增加 250 像素）。</p>
<button onclick="openWin()">创建窗体</button>
<button onclick="resizeWin()">调整窗体大小</button>
<script>
var myWindow;
function openWin() {
  myWindow = window.open("", "", "width=100, height=100");
}
function resizeWin() {
  myWindow.resizeBy(250, 250);
  myWindow.focus();
}
</script>
</body>
</html>

运行一下

定义与用法

resizeBy() 方法将窗体的大小调整为相对于其当前大小的指定大小。

注意：此方法按定义的指定像素数移动窗体的右下角。左上角将不会移动（它将保持在其原始坐标中）。

Browser Support

方法
resizeBy()	Yes	Yes	Yes	Yes	Yes

语法

resizeBy(width, height)

参数值

参数	Type	描述
width	Number	必填。一个正数或负数，指定宽度调整所需的像素数
height	Number	必填。一个正数或负数，指定调整高度的像素数

技术细节

返回值:	无返回值

更多实例

实例

打开一个新窗体，将宽度减少 50px，将高度增加 50px:

<!DOCTYPE html>
<html>
<body>
<p>打开一个新窗体，将宽度减少 50px，将高度增加 50px。</p>
<p><b>提示:</b> 多次按下 "调整窗体大小"</p>
<button onclick="openWin()">创建窗体</button>
<button onclick="resizeWin()">调整窗体大小</button>
<script>
var myWindow;
function openWin() {
  myWindow = window.open("", "", "width=500, height=500");
}
function resizeWin() {
  myWindow.resizeBy(-50, 50);
  myWindow.focus();
}
</script>
</body>
</html>

运行一下

实例

将 resizeBy() 方法与 resizeTo() 方法一起使用:

<!DOCTYPE html>
<html>
<body>
<p>打开一个新窗体，并调整新窗体的宽度和高度。</p>
<button onclick="openWin()">创建窗体</button>
<button onclick="resizeWinTo()">调整窗体大小至 800px * 600px</button>
<button onclick="resizeWinBy()">让新窗体更小</button>
<script>
var myWindow;
function openWin() {
  myWindow = window.open("", "", "width=250, height=250");
}
function resizeWinTo() {
  myWindow.resizeTo(800, 600);
  myWindow.focus();
}
function resizeWinBy() {
  myWindow.resizeBy(-100, -50);
  myWindow.focus();
}
</script>
</body>
</html>

运行一下

实例

以 100px 的速度调整最顶部浏览器窗体的大小（仅适用于 IE 和 Safari）:

<!DOCTYPE html>
<html>
<body>
<p><b>备注:</b> 我们使用 <b>top</b> 元素代替 <b>window</b> 元素, 因为我们使用 frames。如果我们不使用 frames, 可以用 <b>window</b> 元素代替。</p>
<p>这个例子仅适用于 IE 和 Safari</p>
<button onclick="resizeWin()">调整窗体大小</button>
<script>
function resizeWin() {
  top.resizeBy(100, 100);
}
</script>
</body>
</html>

运行一下

Window resizeBy() 方法

实例

定义与用法

Browser Support

语法

参数值

技术细节

更多实例

实例

实例

实例

分类导航