本文旨在提供一个使用 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 来优化性能。
评论（已关闭）
评论已关闭