監聽某個div的寬高是否發生變化(MutationObserver)
阿新 • • 發佈:2018-12-15
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 節點 第二個引數:一個配置物件,指定所要觀察的特定變動