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

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

DDD

发布： 2025-09-11 16:35:19

原创

227人浏览过

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

本文旨在提供一个使用 JavaScript 监听窗口 resize 事件，并根据特定条件动态调整页面元素宽度的实用教程。我们将演示如何根据窗口宽度，将一个蓝色方块的宽度设置为绿色方块的宽度，同时考虑到绿色方块的宽度是以百分比设置的情况。通过本文，你将学会如何正确使用 window.innerWidth 以及如何优化你的代码以适应不同屏幕尺寸。

在Web开发中，经常需要根据屏幕尺寸的变化来调整页面元素的样式和布局，以提供更好的用户体验。本文将介绍如何使用 JavaScript 监听窗口的 resize 事件，并根据窗口宽度动态地改变元素的宽度。

监听 resize 事件

首先，我们需要监听 window 对象的 resize 事件。当窗口大小发生改变时，该事件会被触发。

window.addEventListener('resize', () => {
  // 在这里编写调整元素宽度的代码
}, true);

登录后复制

获取元素宽度并动态调整

在 resize 事件处理函数中，我们需要获取到目标元素的宽度，并将其应用到另一个元素上。在这个例子中，我们希望当屏幕宽度小于 520px 时，将蓝色方块的宽度设置为绿色方块的宽度。

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

通义听悟

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

查看详情

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 来优化性能。

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