当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript监听窗口resize调整元素宽度

JavaScript监听窗口resize调整元素宽度

2025-09-21 21:31:22 0浏览收藏

想让你的网页元素随窗口大小变化而自适应调整吗？本文将深入讲解如何利用 JavaScript 监听 `window.resize` 事件，**实现响应式布局**，动态调整元素宽度。通过详细的代码示例，我们将展示如何监听窗口大小变化，并在窗口宽度小于特定阈值时，将一个元素的宽度设置为另一个元素的宽度。同时，我们还会探讨 `screen.width` 与 `window.innerWidth` 的区别，分享避免频繁 DOM 操作的优化技巧，以及如何处理页面初始状态，确保元素宽度正确显示。掌握这些技巧，让你轻松打造更具用户体验的**响应式网页**！无论你是前端开发新手还是老手，都能从中获益。

JavaScript 监听窗口 Resize 事件动态调整元素宽度

本文旨在讲解如何使用 JavaScript 监听窗口的 resize 事件，并在窗口宽度小于特定值时，动态地将一个元素的宽度设置为另一个元素的宽度。我们将通过示例代码演示如何实现这一功能，并提供一些注意事项，以确保代码的健壮性和兼容性。

实现原理

核心思想是利用 window.addEventListener('resize', callback) 监听窗口大小变化事件。当窗口大小发生变化时，执行回调函数 callback。在 callback 函数中，判断当前窗口的宽度是否小于预设的阈值。如果小于阈值，则获取目标元素的宽度，并将其设置为另一个元素的宽度。

示例代码

以下是一个完整的示例，展示了如何实现动态调整元素宽度的功能：

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

    .box {
      width: 80%;
      height: 80%;
      position: absolute; /* 使用absolute定位 */
      left: 10%;
      top: 10%;
      background: lime;
      display: flex;
      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.querySelector('.box').clientWidth;
      const changingElement = document.querySelector('.changing__width__element');

      if (window.innerWidth < 520) {
        changingElement.style.width = `${boxElement}px`;
      } else {
        changingElement.style.width = "50px";
      }
    });

    // 页面加载时执行一次，确保初始状态正确
    window.dispatchEvent(new Event('resize'));
  </script>
</body>
</html>

代码解释:

HTML 结构: 创建了一个包含两个 div 元素的简单 HTML 结构。.box 元素作为绿色正方形，.changing__width__element 元素作为蓝色正方形。
CSS 样式: 定义了 .box 和 .changing__width__element 元素的样式，包括宽度、高度、背景颜色和定位方式。
JavaScript 代码:
- 使用 window.addEventListener('resize', ...) 监听窗口的 resize 事件。
- 在事件处理函数中，首先获取 .box 元素的宽度，并将其赋值给 boxElement 变量。
- 然后，获取 .changing__width__element 元素，并将其赋值给 changingElement 变量。
- 使用 window.innerWidth 获取当前窗口的宽度。
- 如果窗口宽度小于 520px，则将 changingElement 元素的宽度设置为 boxElement 变量的值（以像素为单位）。
- 否则，将 changingElement 元素的宽度设置为 50px。
- window.dispatchEvent(new Event('resize'));: 这行代码的作用是在页面加载完成后，手动触发一次 resize 事件。这是因为，在某些情况下，页面首次加载时，窗口的宽度可能已经小于 520px，但 resize 事件尚未触发，导致蓝色正方形的宽度没有正确设置为绿色正方形的宽度。通过手动触发 resize 事件，可以确保在页面加载完成后，立即执行 resize 事件处理函数，从而正确设置蓝色正方形的初始宽度。

注意事项

screen.width vs window.innerWidth: 不要使用 screen.width 来获取窗口宽度。screen.width 返回的是屏幕的宽度，而不是浏览器窗口的宽度。应该使用 window.innerWidth 来获取浏览器窗口的实际宽度。
避免频繁操作 DOM: 频繁操作 DOM 可能会导致性能问题。如果需要频繁调整元素宽度，可以考虑使用 CSS 变量或 requestAnimationFrame 来优化性能。
初始状态: 在页面加载时，可能需要手动触发一次 resize 事件，以确保元素的初始宽度正确。
响应式设计: 这种方法适用于简单的响应式布局。对于更复杂的响应式布局，建议使用 CSS media queries。