本文旨在解决在窗口尺寸小于特定值时，如何使用 JavaScript 监听 resize 事件，并根据另一个元素的宽度动态调整目标元素宽度的问题。文章将详细讲解如何正确使用 window.innerWidth 获取窗口宽度，并提供完整的代码示例，帮助开发者实现响应式布局效果。
在 Web 开发中，经常需要根据屏幕尺寸的变化动态调整页面元素的样式，以实现良好的响应式布局。本文将介绍如何使用 JavaScript 监听 resize 事件，并在窗口宽度小于特定值时，动态地将一个元素的宽度设置为另一个元素的宽度。
实现步骤
- html 结构：
首先，我们需要定义 HTML 结构。这里我们创建两个 div 元素，一个作为参照物（绿色方块，box 类），另一个是需要动态调整宽度的元素（蓝色方块，changing__width__element 类）。
<body> <div class="box"> <div class="changing__width__element"></div> </div> </body>
- 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 < 520)： 判断窗口宽度是否小于 520px。
- 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')); });
完整代码示例
<!DOCTYPE html> <html> <head> <title>Resize Element Width</title> <style> 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; } </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', () => { window.dispatchEvent(new Event('resize')); }); </script> </body> </html>
总结
通过监听 resize 事件，并使用 window.innerWidth 获取窗口宽度，我们可以轻松地实现响应式布局效果，动态调整页面元素的样式。在实际开发中，可以根据具体需求修改判断条件和调整的样式，以实现更复杂的布局效果。
评论（已关闭）
评论已关闭