📌  相关文章
📜  HTML | onresize 事件属性(1)

📅  最后修改于: 2023-12-03 14:41:52.262000             🧑  作者: Mango

HTML | onresize 事件属性

在 HTML 中，可以通过 onresize 事件属性来指定浏览器窗口或元素大小变化时需要执行的 JavaScript 代码。

语法

指定 onresize 事件的语法为：

<element onresize="JavaScript">

其中，element 指定了要监测大小变化的元素，可以是 window（即浏览器窗口）或者其他 DOM 元素。

JavaScript 指定了在元素大小变化时需要执行的 JavaScript 代码。

实例

我们来看一个简单的例子：

<!DOCTYPE html>
<html>
  <head>
    <title>onresize 事件属性示例</title>
  </head>
  <body onresize="resizeHandler()">
    <div>当前窗口宽度为：<span id="width"></span></div>
    <div>当前窗口高度为：<span id="height"></span></div>

    <script>
      function resizeHandler() {
        document.getElementById('width').innerText = window.innerWidth;
        document.getElementById('height').innerText = window.innerHeight;
      }

      // 页面加载时执行一次
      resizeHandler();
    </script>
  </body>
</html>

以上代码会在浏览器窗口大小变化时，实时显示窗口的宽度和高度。

注意事项
  1. 因为 onresize 事件会在浏览器窗口大小变化时频繁触发，建议执行的 JavaScript 代码尽量简单轻量，以避免性能问题。
  2. 如果要在一个元素上监听大小变化，需要注意该元素必须具有明确的尺寸限制，如指定了 height 和 width 属性或者采用了 flex 布局等。
  3. 在浏览器中，有一些情况下不会触发 onresize 事件，如：全屏模式下（F11）或者在浏览器的缩放比例变化时等。