JavaScript：监听窗口resize事件动态调整元素宽度-html教程-PHP中文网

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

心靈之曲

发布： 2025-09-11 17:37:01

原创

384人浏览过

javascript：监听窗口resize事件动态调整元素宽度

本文旨在解决在窗口尺寸小于特定值时，如何使用 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 事件，并动态调整蓝色方块的宽度。

听脑AI

听脑AI语音，一款专注于音视频内容的工作学习助手，为用户提供便捷的音视频内容记录、整理与分析功能。

378

查看详情

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>

登录后复制