我們常用到動(dòng)態(tài)計(jì)算頁(yè)面的內(nèi)容违霞,假設(shè)我們需要?jiǎng)討B(tài)給表格設(shè)置高度來(lái)實(shí)現(xiàn)表格鋪滿整個(gè)屏幕的效果匠抗。
表格高度=document.body.clientHeight
(頁(yè)面可視區(qū)域高度)-頁(yè)面上其他元素高度(例如:tab计寇,header艳吠,footer,搜索欄港准,操作欄等的高度)
new MutationObserver((mutations, observer) => {
//監(jiān)聽(tīng)table-header元素
const el = document.querySelector('.table-header')
if (el != null) {
//每次監(jiān)聽(tīng)完之后取消監(jiān)聽(tīng)事件
observer.disconnect()
//因?yàn)樵扔?jì)算height時(shí)加了操作欄的高度呢堰,因此要減去原來(lái)高度抄瑟,沒(méi)有時(shí)使用初始高度
if (el.clientHeight > 52) {
//height 頁(yè)面上固定高度元素相加的和
//el.clientHeight 動(dòng)態(tài)元素的高度
this.height = this.height + el.clientHeight
}
}
}).observe(document, { subtree: true })
-
childList
:子元素發(fā)生變化時(shí)觸發(fā)回調(diào)(包含其本身) -
subtree
:除了目標(biāo)節(jié)點(diǎn)是否觀察目標(biāo)元素的子元素(不包含其本身)