JS监听dom高度变化方法总结

前沿：

有时候我们需要监听dom的变化，比如获取父元素的高度，动态的设置子元素的高度，所以需要监听 dom 的高度变化，才能准确获取dom的高度，那么有哪些监听dom高度变化的方法呢？今天简单列举一下。

1、MutationObserver 构造函数

Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。 目前来看，IE11及以上都可以兼容。兼容性还可以，可以大胆使用。

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);

// 以上述配置开始观察目标节点
observer.observe(targetNode, config);

// 之后，可停止观察
observer.disconnect();

Mutation Observer 的应用

const element = document.getElementById('id');
const MutationObserver = window.MutationObserver || window.webkitMutationObserver || window.MozMutationObserver;

const recordHeight = 0;
const 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(element, {
  childList: true, // 子节点的变动（新增、删除或者更改）
  attributes: true, // 属性的变动
  characterData: true, // 节点内容或节点文本的变动
  subtree: true // 是否将观察器应用于该节点的所有后代节点
})

注意：如果要监听元素的宽、高，元素要设置width和height属性，没有该属性值时，宽高发生变化时 MutationObserver监听函数不会触发

2、ResizeObserver 

ResizeObserver 接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。

// 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);

参考原文：js监听dom高度变化方法总结