使用 JavaScript 监听窗口大小变化并动态调整元素宽度-html教程-PHP中文网

使用 JavaScript 监听窗口大小变化并动态调整元素宽度

心靈之曲

发布： 2025-09-11 15:59:02

原创

665人浏览过

使用 javascript 监听窗口大小变化并动态调整元素宽度

本文介绍了如何使用 JavaScript 监听窗口 resize 事件，并在窗口宽度小于特定值时，动态地将一个元素的宽度设置为另一个元素的宽度。文章提供了详细的代码示例，并解释了关键概念，帮助开发者实现响应式布局。

在 Web 开发中，响应式设计至关重要。为了适应不同屏幕尺寸的设备，我们需要根据窗口大小动态调整页面元素的布局和样式。本文将介绍如何使用 JavaScript 监听 window 对象的 resize 事件，并在窗口宽度小于特定值时，将一个元素的宽度设置为另一个元素的宽度。

核心思路

监听 resize 事件: 使用 window.addEventListener('resize', callback) 监听窗口大小变化。
获取元素宽度: 使用 element.clientWidth 获取目标元素的宽度。
设置元素宽度: 修改需要改变宽度的元素的 style.width 属性。
判断窗口宽度: 使用 window.innerWidth 获取当前窗口的内部宽度，并与预设的阈值进行比较。

代码示例

立即学习“Java免费学习笔记（深入）”；

以下是一个完整的代码示例，演示了如何实现上述功能。

通义听悟

阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。

查看详情

<!DOCTYPE html>
<html>
<head>
<title>Resize Element Width</title>
<style>
body, html {
  width: 100%;
  height: 100%;
  margin: 0; /* 移除默认 margin */
}

.box {
  width: 80%;
  height: 80%;
  margin: 10%; /* 使用 margin 实现居中 */
  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"; // 恢复默认宽度
      }
    });

    // 页面加载时执行一次，确保初始状态正确
    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>

登录后复制

代码解释

HTML 结构: 包含一个绿色方块 (.box) 和一个蓝色方块 (.changing__width__element)。
CSS 样式: 设置了方块的宽度、高度、背景颜色和定位方式。使用了百分比宽度使 .box 具有响应性。
JavaScript 代码:
- window.addEventListener('resize', ...): 监听窗口的 resize 事件。
- document.getElementsByClassName(...)[0]: 获取 DOM 元素。注意，getElementsByClassName 返回的是一个 HTMLCollection，所以需要通过索引 [0] 获取第一个元素。
- element.clientWidth: 获取元素的可见宽度，不包括边框和滚动条。
- window.innerWidth: 获取窗口的内部宽度，不包括滚动条。
- changingElement.style.width = ...: 设置元素的宽度。
- window.addEventListener('load', ...)：在页面加载完毕后执行一次，以确保在页面首次加载时，如果窗口宽度小于 520px，蓝色方块的宽度也能正确设置。

注意事项

性能优化: 频繁的 resize 事件触发可能会影响性能。可以使用 debounce 或 throttle 技术来限制事件处理函数的执行频率。
初始状态: 在页面加载时，需要执行一次相同的逻辑，以确保初始状态正确。可以使用 window.addEventListener('load', ...) 来实现。
CSS 方案: 对于简单的布局调整，使用 CSS Media Queries 通常是更高效和简洁的选择。 JavaScript 方案适用于需要更复杂的动态逻辑的情况。
screen.width vs window.innerWidth: screen.width 获取的是屏幕的宽度，而 window.innerWidth 获取的是浏览器窗口的内部宽度。在这里，我们需要监听浏览器窗口的宽度变化，因此应该使用 window.innerWidth。

总结

通过监听 window 对象的 resize 事件，我们可以实现动态调整页面元素宽度的功能，从而创建更具响应性的 Web 应用。在实际开发中，需要根据具体需求选择合适的解决方案，并注意性能优化和初始状态的处理。虽然 JavaScript 可以实现动态调整，但在简单的响应式布局场景下，优先考虑使用 CSS Media Queries。

以上就是使用 JavaScript 监听窗口大小变化并动态调整元素宽度的详细内容，更多请关注php中文网其它相关文章！