JavaScript 中的窗口大小调整事件
本教程将讨论使用 JavaScript 中的 addEventListener() 和 onresize() 函数添加调整大小事件。
要向窗口添加调整大小事件，我们可以使用 JavaScript 中的 addEventListener() 函数。此函数向对象添加包含函数的事件。例如，让我们向对象窗口添加一个事件以获取其宽度和高度并将其显示在网页上。请参考下面的代码。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span>Width = </span><span id="SpanID1"></span>
<br />
<span>Height = </span><span id="SpanID2"></span>
<script type="text/javascript">
start();
window.addEventListener('resize', start);
function start(){
document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;
document.getElementById('SpanID2').innerText = document.documentElement.clientHeight;
}
</script>
</body>
</html>
输出：
Width = 798
Height = 779
在上面的代码中，我们添加了一个带有文本 Width= 的 span，然后，我们在 body 部分添加了一个 id 为 SpanID1 的空 span。我们添加了一个 br 标签来将光标移动到一个新行，在新行上，我们添加了另一个带有文本 Height= 的 span，之后，我们添加了另一个 id 为 SpanID2 的空 span。
跨度的 id 将用于获取 JavaScript 中的元素。在脚本标签中，我们有一个函数 start()，用于改变两个 span 的文本与窗口的宽度和高度。在 start() 函数之后，我们添加了 resize 事件，当用户调整窗口大小时，它将调用 start() 函数。窗口的宽度和高度会显示在页面上，并且会随着窗口大小的变化而变化。你可以将上述代码保存到 HTML 文件中，然后使用任何浏览器打开它并更改其大小以查看代码是否有效。你还可以使用 addEventListener() 函数将事件添加到任何对象，例如复选框。
要向窗口添加调整大小事件，我们可以使用 JavaScript 中的 onresize() 函数。此函数用于指定更改窗口大小时会发生什么。例如，让我们向对象窗口添加一个事件以获取其宽度和高度并将其显示在网页上。请参考下面的代码。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span>Width = </span><span id="SpanID1"></span>
<br />
<span>Height = </span><span id="SpanID2"></span>
<script type="text/javascript">
start();
window.onresize = start;
function start(){
document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;
document.getElementById('SpanID2').innerText = document.documentElement.clientHeight;
}
</script>
</body>
</html>
输出：
Width = 798
Height = 779
在上面的代码中，如果窗口的大小正在改变，start() 函数将被调用。如你所见，输出与上述方法相同。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
如何在 JavaScript 中合并两个数组而不出现重复的情况
发布时间：2024/03/23 浏览次数：86 分类：JavaScript
-
本教程介绍了如何在 JavaScript 中合并两个数组，以及如何删除任何重复的数组。
