监听DOM尺寸变化 - ResizeObserver

一、与 MutationObserver Api的区别

  • MutationObserver 主要用来监听 DOM 元素的属性和节点变化的,非 DOM 样式尺寸,可查看之前一篇 blog - DOM规范 - MutationObserver接口观察DOM元素的属性和节点变化
  • ResizeObserver 主要用来监听 DOM 元素的 内容区域 的尺寸变化,可以监听到 Element 的内容区域或 SVGElement 的边界框改变

二、用法

1. 构造函数,创建并返回一个 ResizeObserver 对象

const resizeObserver = new ResizeObserver(entries => {
  console.log('监听到了尺寸变化了...', entries)
})

resizeObserver.observe(document.getElementById('box'))

  • resizeObserver 是返回的一个操作对象,可调用其中的方法来监听、取消监听 DOM 元素等操作。

  • observe 方法用于开始观察指定的 Element 或 SVGElement 的尺寸变化。

  • entries 参数返回是一个数组,里面包含监听的每个 DOM 元素的相关信息,其中 contentRect 包含的是变化后的 内容区域 的尺寸信息。

监听DOM尺寸变化 - ResizeObserver_第1张图片

2. unobserve 结束观察指定的 Element 或 SVGElement

resizeObserver.unobserve(document.getElementById('box'))

3. disconnect 取消和结束目标对象上所有对 Element或 SVGElement 观察

resizeObserver.disconnect()

三、完整栗子及注意点~

  • #box1 是 标准盒模型(w3c标准),width = 内容区(content),height 同理。

  • #box2 是边框盒模型(IE盒模型),width = 内容区(content)+ 内边距(padding) + 内边框(border),height 同理。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ResizeObserver 测试</title>
  <style>
    body {
      margin: 0;
    }
    #box1 {
      width: 200px;
      height: 200px;
      margin: 10px;
      padding: 10px;
      background-color: rgb(195, 245, 175);
    }
    #box2 {
      width: 200px;
      height: 200px;
      margin: 10px;
      padding: 10px;
      box-sizing: border-box; /** 注意,此处盒模型与 #box1 不同 */
      background-color: rgb(175, 182, 245);
    }
  </style>
</head>
<body>

  <button onclick="change1()">更改box1样式</button>
  <button onclick="change2()">更改box2样式</button>
  <button onclick="cancel1()">取消监听box1</button>
  <button onclick="cancel2()">取消监听box2</button>
  <button onclick="cancel()">取消所有元素</button>

  <div id="box1">这是一个测试盒子111~~~</div>

  <div id="box2">这是一个测试盒子222~~~</div>
  

  <script>
    const box1 = document.getElementById('box1')
    const box2 = document.getElementById('box2')
    let b1width = 1
    let b2width = 1

    const resizeObserver = new ResizeObserver(entries => {
      console.log('监听到了尺寸变化了...', entries)
    })

    resizeObserver.observe(box1)
    resizeObserver.observe(box2)

    function change1 () {
      const rect = box1.getBoundingClientRect()
      // box1.style.width = rect.width + 10 + 'px'
      // 因 #box1 是标准盒,所以边框(border)尺寸变化不会引起内容区(content)尺寸变化,所以以下语句`不会`触发观察的回调函数事件
      box1.style.border = 1 + b1width + 'px solid red'
      b1width ++
    }

    function change2 () {
      const rect = box2.getBoundingClientRect()
      // box2.style.width = rect.width + 10 + 'px'
      // 因 #box2 是边框盒,所以边框(border)尺寸变化会引起内容区(content)尺寸变化,所以以下语句`会`触发观察的回调函数事件
      box2.style.border = 1 + b2width + 'px solid red'
      b2width ++
    }

    function cancel1 () {
      resizeObserver.unobserve(box1)
    }

    function cancel2 () {
      resizeObserver.unobserve(box2)
    }

    function cancel () {
      resizeObserver.disconnect()
    }

  </script>
</body>
</html>

打印信息

监听DOM尺寸变化 - ResizeObserver_第2张图片
盒模型示意图

监听DOM尺寸变化 - ResizeObserver_第3张图片

你可能感兴趣的:(前端,javascript,开发语言,ecmascript)