监测div大小变化_js 怎么监控一个普通DIV的宽高发生变化

情形：

左右两个div，有一个小按钮，点击时候，可以控制左边的div显示或隐藏，右边的div随着左边的div隐藏显示宽度会发生变化，里面的子级元素当然也会跟着变化。

但是因为特殊情况，必须要设置右边div里面的元素为absolute。

如果左边没隐藏，左边可以把最外面的div撑开(flex布局)，右边也是有高度的。

但是如果左边隐藏了，右边因为内容脱出文档流，所以高度为0，内容看不到了。

现在我需要监听右边宽度变化，设置右边内容的高度。

代码：

mounted () {

this.wrapDom = document.getElementById('tableWrap')

let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver

let element = document.querySelector('#tableID')

this.observer = new MutationObserver((objList) => {

console.log('obj List:', objList)

let width = element.offsetWidth

if (this.recordOldValue && width === this.recordOldValue.width) {

return

}

this.recordOldValue = {

width

}

console.log('obj width:', width)

this.wrapDom.style.height = element.offsetHeight + 58 + 'px'

})

this.observer.observe(element, { attributes: true, childList: true, subtree: true })

},

beforeDestroy () {

// 停止观测

this.observer.disconnect()

this.observer = null

}