快捷導(dǎo)航

JS監(jiān)聽dom高度變化幾種常用方法總結(jié)

更新時(shí)間：2023年10月10日 09:09:35 作者：1024小神

我們?cè)陂_發(fā)中會(huì)遇到一些需求,需要監(jiān)聽元素變化,比如元素屬性變化,元素大小變化,這篇文章主要給大家介紹了關(guān)于JS監(jiān)聽dom高度變化幾種常用方法的相關(guān)資料,需要的朋友可以參考下

前言

有時(shí)候我們需要監(jiān)聽dom的變化，例如有時(shí)候圖片未加載完就取 dom 的高度，這樣會(huì)導(dǎo)致高度不正確，所以需要監(jiān)聽 dom 的高度變化。才能準(zhǔn)確獲取dom的高度，那么有哪些監(jiān)聽dom高度變化的方法呢？今天簡單列舉一下。

監(jiān)聽dom樹變化DOMNodeInserted

可以用DOMNodeInserted事件監(jiān)聽子元素是否改變，但是不是很準(zhǔn)確。

var dom = document.getElementById('dom');
var height = dom.offsetHeight;
dom.addEventListener('DOMNodeInserted', function () {
  var newHeight = dom.offsetHeight;
  if (newHeight !== height) {
    console.log('dom高度變化了');
    height = newHeight;
  }
});

MutationObserver 構(gòu)造函數(shù)

Mutation Observer API 用來監(jiān)視 DOM 變動(dòng)。DOM 的任何變動(dòng)，比如節(jié)點(diǎn)的增減、屬性的變動(dòng)、文本內(nèi)容的變動(dòng)，這個(gè) API 都可以得到通知。目前來看，IE11及以上都可以兼容。兼容性還可以，可以大膽使用。

MutationObserver 構(gòu)造函數(shù)的實(shí)例傳的是一個(gè)回調(diào)函數(shù)，該函數(shù)接受兩個(gè)參數(shù)，第一個(gè)是變動(dòng)的數(shù)組，第二個(gè)是觀察器的實(shí)例。

var observer = new MutationObserver(function (mutations, observer){
  mutations.forEach(function (mutaion) {
    console.log(mutation);
  })
})

MutationObserver 的應(yīng)用

var haoroomsId = document.getElementById('haorooms');
var MutationObserver = window.MutationObserver || window.webkitMutationObserver || window.MozMutationObserver;
var recordHeight = 0;
var mutationObserver = new MutationObserver(function (mutations) {
  console.log(mutations);
  let height = window.getComputedStyle(haoroomsId).getPropertyValue('height');
  if (height === recordHeight) {
    return;
  }
  recordHeight = height;
  console.log('高度變化了');
  // 之后更新外部容器等操作
})
mutationObserver.observe(haoroomsId, {
  childList: true, // 子節(jié)點(diǎn)的變動(dòng)（新增、刪除或者更改）
  attributes: true, // 屬性的變動(dòng)
  characterData: true, // 節(jié)點(diǎn)內(nèi)容或節(jié)點(diǎn)文本的變動(dòng)
  subtree: true // 是否將觀察器應(yīng)用于該節(jié)點(diǎn)的所有后代節(jié)點(diǎn)
})

針對(duì)動(dòng)畫animation、transform監(jiān)聽不到的情況，可以在動(dòng)畫完成監(jiān)聽高度就可以了

  el.addEventListener('animationend', onHeightChange)
    el.addEventListener('transitionend', onHeightChange)

ResizeObserver

ResizeObserver 是新的API,處于實(shí)驗(yàn)階段，因此，兼容性不太好，文檔：ResizeObserver - Web API 接口參考 | MDN

使用很簡單

// create an Observer instance
const resizeObserver = new ResizeObserver((entries) =>
  console.log('Body height changed:', entries[0].target.clientHeight)
);
// start observing a DOM node
resizeObserver.observe(document.body);

ResizeObserver Polyfill

實(shí)驗(yàn)性的 API 不足，可以用 Polyfill 來彌補(bǔ)

ResizeObserver Polyfill 利用事件冒泡，在頂層 document 上監(jiān)聽動(dòng)畫 transitionend；

監(jiān)聽 window 的 resize 事件；

其次用 MutationObserver 監(jiān)聽 document 元素；

兼容IE11以下通過 DOMSubtreeModified 監(jiān)聽 document 元素。

/**
 * Initializes DOM listeners.
 *
 * @private
 * @returns {void}
 */
ResizeObserverController.prototype.connect_ = function () {
    // Do nothing if running in a non-browser environment or if listeners
    // have been already added.
    if (!isBrowser || this.connected_) {
        return;
    }
    // Subscription to the "Transitionend" event is used as a workaround for
    // delayed transitions. This way it's possible to capture at least the
    // final state of an element.
    document.addEventListener('transitionend', this.onTransitionEnd_);
    window.addEventListener('resize', this.refresh);
    if (mutationObserverSupported) {
        this.mutationsObserver_ = new MutationObserver(this.refresh);
        this.mutationsObserver_.observe(document, {
            attributes: true,
            childList: true,
            characterData: true,
            subtree: true
        });
    }
    else {
        document.addEventListener('DOMSubtreeModified', this.refresh);
        this.mutationEventsAdded_ = true;
    }
    this.connected_ = true;
};