1. 程式人生 > >監聽某個div的寬高是否發生變化(MutationObserver)

監聽某個div的寬高是否發生變化(MutationObserver)

web api中有一個叫做MutationObserver的介面 MutationObserver介面提供了監視對DOM樹所做更改的能力。 DOM 的任何變動,比如節點的增減、屬性的變動、文字內容的變動,這個 API 都可以得到通知。 用過vue 的nextTick的就會知道,這個方法就是用到了MutationObserver 下面是一個示例

  // Firefox和Chrome早期版本中帶有字首
        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
// 選擇目標節點
        var target = document.querySelector('#rador');
// 建立觀察者物件
        var observer = new MutationObserver(function (mutations) {
          mutations.forEach(function (mutation) {
           console.log(mutation)
          });
        });
// 配置觀察選項:
        var config = {
        attributes: true,//檢測屬性變動
         childList: true,//檢測子節點變動
         characterData: true//節點內容或節點文字的變動。
         }
// 傳入目標節點和觀察選項
        observer.observe(target, config);
// /停止觀察
//           observer.disconnect(); 

observe方法用來啟動監聽,它接受兩個引數。

第一個引數:所要觀察的 DOM 節點 第二個引數:一個配置物件,指定所要觀察的特定變動