本文旨在解决在窗口尺寸小于特定值时，如何使用 JavaScript 监听 resize 事件，并根据另一个元素的宽度动态调整目标元素宽度的问题。文章将详细讲解如何正确使用 window.innerWidth 获取窗口宽度，并提供完整的代码示例，帮助开发者实现响应式布局效果。
在 Web 开发中，经常需要根据屏幕尺寸的变化动态调整页面元素的样式，以实现良好的响应式布局。本文将介绍如何使用 JavaScript 监听 resize 事件，并在窗口宽度小于特定值时，动态地将一个元素的宽度设置为另一个元素的宽度。
实现步骤
- HTML 结构：
首先，我们需要定义 HTML 结构。这里我们创建两个 div 元素，一个作为参照物（绿色方块，box 类），另一个是需要动态调整宽度的元素（蓝色方块，changing__width__element 类）。
- CSS 样式：
接下来，我们定义 CSS 样式。box 元素的宽度设置为 80%，changing__width__element 元素的初始宽度设置为 50px。
立即学习“Java免费学习笔记（深入）”；
body, html {
width: 100%;
height: 100%;
}
.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;
}- JavaScript 代码：
现在，我们编写 JavaScript 代码来监听 resize 事件，并动态调整蓝色方块的宽度。
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('resize', ...)： 监听窗口的 resize 事件。当窗口大小改变时，事件处理函数会被调用。
- document.getElementsByClassName('box')[0].clientWidth： 获取 box 元素的宽度。
- document.getElementsByClassName('changing__width__element')[0]： 获取 changing__width__element 元素。
- window.innerWidth： 获取窗口的内部宽度（包括滚动条）。
- if (window.innerWidth
- changingElement.style.width =${boxElement}px`： 如果窗口宽度小于520px，则将changingwidthelement元素的宽度设置为box` 元素的宽度。
- changingElement.style.width = "50px"： 如果窗口宽度大于等于 520px，则将 changing__width__element 元素的宽度恢复到初始值 50px。
注意事项：
screen.width vs window.innerWidth： 不要使用 screen.width 来获取窗口宽度。screen.width 返回的是屏幕的宽度，而不是窗口的宽度。应该使用 window.innerWidth 来获取窗口的内部宽度。
-
初始执行： 为了在页面加载时就生效，可以在页面加载完成后手动触发一次 resize 事件。
window.addEventListener('load', () => { window.dispatchEvent(new Event('resize')); });
完整代码示例
Resize Element Width
总结
通过监听 resize 事件，并使用 window.innerWidth 获取窗口宽度，我们可以轻松地实现响应式布局效果，动态调整页面元素的样式。在实际开发中，可以根据具体需求修改判断条件和调整的样式，以实现更复杂的布局效果。
