本文旨在解决在窗口尺寸小于特定值时，如何使用 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 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; }window.addEventListener('resize', () => { const boxElement = document.getElementsByClassName('box')[0].clientWidth; const changingElement = document.getElementsByClassName('changing__width__element')[0]; if (window.innerWidth { window.dispatchEvent(new Event('resize')); });
总结
通过监听 resize 事件，并使用 window.innerWidth 获取窗口宽度，我们可以轻松地实现响应式布局效果，动态调整页面元素的样式。在实际开发中，可以根据具体需求修改判断条件和调整的样式，以实现更复杂的布局效果。
以上就是JavaScript：监听窗口resize事件动态调整元素宽度的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1575352.html
微信扫一扫 
支付宝扫一扫 
