js监听div元素的宽高变化

待我称王封你为后i 2023-10-11 15:14 51阅读 0赞

## [js监听div元素的宽高变化][js_div] ##

[javascript][]

发布于 2019-06-27

![4b9cb6f12946ae5fdc7efddb5ce00117.png][]

#### 一、js监听window变化的方法 ####

1、onsize只能监听window对象的变化

**(1)、 window对象原生、jQuery方法**

//原生写法
    window.onsize = function(){
        console.log("11");
    }
    
    //jquery写法
    $(window).resize(function(){
        console.log("22");
    })

`//注意：浏览器窗口大小改变时，这段代码会执行多次，对性能影响大，容易造成浏览器假死。`

**(2)、实现不管窗口怎么改变，只在停止改变之后才执行代码**

var resizeTimer = null;
    
    $(window).resize(function(){
        if(resizeTimer){
            clearTimeout(resizeTimer);
        }
        resizeTimer = setTimeout(function(){
            console.log("窗口改变")
        },100)
    })

`//通过使用定时器的方式来让代码延迟执行，每次窗口改变的时候就清除事件，只有停下改变之后才会继续再执行，解决resize执行多次的问题。`

#### 二、js监听div容器变化的方法 ####

#### 1、MutationObserver ####

**（1）、介绍： MutationObserver 可以用来监听整个DOM中的变化**。

**（2）、构造函数，参数为回调函数**

构造函数为window.MutationObserver，它在监听到DOM中的改变并且一系列改变结束后触发回调函数。他与事件不同的是：它在DOM变化时，会记录每一个DOM的变化（为一个MutationRecord对象），到DOM变化结束时触发回调函数。DOM变化可能是一系列的（比如同时改变宽和高），那么这一系列的变化就会产生一个队列，这个队列会作为参数传递给回调函数。

`由于浏览器差异。一些版本的浏览器各自支持了构造函数，但是用法一致的。实例化一个观察者，代码如下：`

let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
    let observer = new MutationObserver(callback);

**（3）、常用三个API接口**

1️⃣、observe(element,options) 配置MutationObserver在DOM更改匹配给定选项时，通过其回调函数开始接收通知。  
element是要监听的DOM元素，options为监听选项对象，可选的选项如下：

![图片描述][0c3e07040a3b17947ea3c5175fa032b3.png]

所以监听元素宽高变化，就是监听style属性变化

observer.observe(element,{attributes:true,attributeFilter:['style'],attributeOldValue:true});
    
    //这样当元素style发生变化时，就会触发构造函数中的callback函数。即：
    
    let observer = new MutationObserver(callback) ，触发这里的callback。

2️⃣、 disconnect() 阻止 MutationObserver 实例继续接收的通知，直到再次调用其observe方法，该观察者对象包含的回调函数都不会再被调用。

3️⃣、 takeRecords() 从MutationObserver的通知队列中删除所有待处理的通知，并将它们返回到一个MutationRecord对象构成的新数组中。

#### 2、vue示例 ####

<template>
      <div class="container">
        <div class="resize-element">
          改变大小试试
        </div>
        <div class="resize-record">
          触发了{
       {firedNum}}次resize事件。
        </div>
      </div>
    </template>
     
    <script>
    export default {
      showName: '监听DOM变化',
      data () {
        return {
          observer: null,
          firedNum: 0,
          recordOldValue: { // 记录下旧的宽高数据，避免重复触发回调函数
            width: '0',
            height: '0'
          }
        }
      },
      mounted () {
        let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
        let element = document.querySelector('.resize-element')
        this.observer = new MutationObserver((mutationList) => {
          for (let mutation of mutationList) {
            console.log(mutation)
          }
          let width = getComputedStyle(element).getPropertyValue('width')
          let height = getComputedStyle(element).getPropertyValue('height')
          if (width === this.recordOldValue.width && height === this.recordOldValue.height) return
          this.recordOldValue = {
            width,
            height
          }
          this.firedNum += 1
        })
        this.observer.observe(element, { attributes: true, attributeFilter: ['style'], attributeOldValue: true })
      },
      beforeDestroyed () {
        if (this.observer) {
          this.observer.disconnect()
          this.observer.takeRecords()
          this.observer = null
        }
      }
    }
    </script>
     
    <style lang="stylus" scoped>
    .container
      position relative
      .resize-element
        transform translate(-50%, -50%)
        position absolute
        top 50%
        left 50%
        height 10rem
        width 10rem
        overflow hidden
        resize both
        display block
        box-shadow 0 0 1px 1px #3361D8
        border-radius 2px
    </style>

[js_div]: https://segmentfault.com/a/1190000019599439
[javascript]: https://segmentfault.com/t/javascript
[4b9cb6f12946ae5fdc7efddb5ce00117.png]: https://img-blog.csdnimg.cn/img_convert/4b9cb6f12946ae5fdc7efddb5ce00117.png
[0c3e07040a3b17947ea3c5175fa032b3.png]: https://img-blog.csdnimg.cn/img_convert/0c3e07040a3b17947ea3c5175fa032b3.png