本文旨在提供一个使用 JavaScript 监听窗口 resize 事件，并根据特定条件动态调整页面元素宽度的实用教程。我们将演示如何根据窗口宽度，将一个蓝色方块的宽度设置为绿色方块的宽度，同时考虑到绿色方块的宽度是以百分比设置的情况。通过本文，你将学会如何正确使用 window.innerWidth 以及如何优化你的代码以适应不同屏幕尺寸。
在Web开发中，经常需要根据屏幕尺寸的变化来调整页面元素的样式和布局，以提供更好的用户体验。本文将介绍如何使用 JavaScript 监听窗口的 resize 事件，并根据窗口宽度动态地改变元素的宽度。
监听 resize 事件
首先，我们需要监听 window 对象的 resize 事件。当窗口大小发生改变时，该事件会被触发。
window.addEventListener('resize', () => {
// 在这里编写调整元素宽度的代码
}, true);获取元素宽度并动态调整
在 resize 事件处理函数中，我们需要获取到目标元素的宽度，并将其应用到另一个元素上。在这个例子中，我们希望当屏幕宽度小于 520px 时，将蓝色方块的宽度设置为绿色方块的宽度。
立即学习“Java免费学习笔记（深入）”；
window.addEventListener('resize', () => {
const boxElement = document.getElementsByClassName('box')[0].clientWidth;
const changingElement = document.getElementsByClassName('changing__width__element')[0];
if (window.innerWidth < 520) {
changingElement.style.width = `${boxElement}px`;
} else {
// 恢复默认宽度，避免窗口变大时宽度不正确
changingElement.style.width = "50px";
}
}, true);代码解释：
- document.getElementsByClassName('box')[0].clientWidth：获取 class 为 box 的元素的宽度（绿色方块）。
- document.getElementsByClassName('changing__width__element')[0]：获取 class 为 changing__width__element 的元素（蓝色方块）。
- window.innerWidth < 520：判断窗口的内部宽度是否小于 520px。
- changingElement.style.width =${boxElement}px`：将蓝色方块的宽度设置为绿色方块的宽度。注意，这里需要使用像素单位 (px`)。
- else { changingElement.style.width = "50px"; }: 当窗口宽度大于等于 520px 时，将蓝色方块的宽度恢复到默认值，避免窗口放大时宽度不正确。
完整示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Resize Event Example</title>
<style>
body, html {
width: 100%;
height: 100%;
margin: 0; /* 移除默认 margin */
}
.box {
width: 80%;
height: 80%;
left: 10%;
top: 10%;
background: lime;
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.changing__width__element {
width: 50px;
height: 50px;
background: blue;
position: relative;
}
</style>
</head>
<body>
<div class="box">
<div class="changing__width__element"></div>
</div>
<script>
window.addEventListener('resize', () => {
const boxElement = document.getElementsByClassName('box')[0].clientWidth;
const changingElement = document.getElementsByClassName('changing__width__element')[0];
if (window.innerWidth < 520) {
changingElement.style.width = `${boxElement}px`;
} else {
changingElement.style.width = "50px";
}
}, true);
// 页面加载时执行一次，确保初始状态正确
window.addEventListener('load', () => {
const boxElement = document.getElementsByClassName('box')[0].clientWidth;
const changingElement = document.getElementsByClassName('changing__width__element')[0];
if (window.innerWidth < 520) {
changingElement.style.width = `${boxElement}px`;
} else {
changingElement.style.width = "50px";
}
});
</script>
</body>
</html>注意事项：
- window.innerWidth vs screen.width： window.innerWidth 返回浏览器窗口的内部宽度，不包括滚动条和边框。 screen.width 返回屏幕的宽度。 在大多数情况下，应该使用 window.innerWidth 来判断窗口大小。
- 初始状态： 需要在页面加载时执行一次 resize 事件处理函数中的代码，以确保在页面首次加载时元素的宽度正确。 可以使用 window.addEventListener('load', ...) 来实现。
- 性能优化： 频繁触发 resize 事件可能会影响性能。可以使用 debounce 或 throttle 技术来限制事件处理函数的执行频率。
总结
通过本文，你学习了如何使用 JavaScript 监听窗口的 resize 事件，并根据窗口宽度动态地调整页面元素的宽度。 掌握这些技巧可以帮助你创建更具响应式和用户友好的Web应用程序。记住要区分 window.innerWidth 和 screen.width，并在页面加载时确保元素的初始状态正确。同时，考虑使用 debounce 或 throttle 来优化性能。
