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() 函数将被调用。如你所见，输出与上述方法相同。
相关文章
使用 CSS 和 JavaScript 制作文本闪烁
发布时间：2023/04/28 浏览次数：146 分类：CSS
-
本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。
在 PHP 变量中存储 Div Id 并将其传递给 JavaScript
发布时间：2023/03/29 浏览次数：69 分类：PHP
-
本文教导将 div id 存储在 PHP 变量中并将其传递给 JavaScript 代码。
在 JavaScript 中从字符串中获取第一个字符
发布时间：2023/03/24 浏览次数：93 分类：JavaScript
-
在本文中，我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
在 JavaScript 中获取字符串的最后一个字符
发布时间：2023/03/24 浏览次数：141 分类：JavaScript
-
本教程展示了在 javascript 中获取字符串最后一个字符的方法
