我们常用到动态计算页面的内容,假设我们需要动态给表格设置高度来实现表格铺满整个屏幕的效果。
表格高度=document.body.clientHeight
(页面可视区域高度)-页面上其他元素高度(例如:tab,header,footer,搜索栏,操作栏等的高度)
new MutationObserver((mutations, observer) => {
//监听table-header元素
const el = document.querySelector('.table-header')
if (el != null) {
//每次监听完之后取消监听事件
observer.disconnect()
//因为原先计算height时加了操作栏的高度,因此要减去原来高度,没有时使用初始高度
if (el.clientHeight > 52) {
//height 页面上固定高度元素相加的和
//el.clientHeight 动态元素的高度
this.height = this.height + el.clientHeight
}
}
}).observe(document, { subtree: true })
-
childList
:子元素发生变化时触发回调(包含其本身) -
subtree
:除了目标节点是否观察目标元素的子元素(不包含其本身)
网友评论