問題描述

監(jiān)聽DOM元素大小的變化，在前端開發(fā)中，算是一個比較常見的需求，比如我們要制作可伸縮的圖表的時候，可能需要根據(jù)DOM大小的變化，進(jìn)行動態(tài)的更新圖表。

解決方案

方法一：?

監(jiān)聽window變化，再改變對應(yīng)DOM變化

window.onresize = function() {const width = getStyle(dom, 'width');const height = getStyle(dom, 'height'); } function getStyle(ele,attr){if(window.getComputedStyle){return window.getComputedStyle(ele,null)[attr];}return ele.currentStyle[attr]; }

通過這樣的方式可以進(jìn)行監(jiān)聽DOM元素的變化，但是不是最完善的。

例：通過js改變一個dom的寬度或者高度，但是window是沒有觸發(fā)resize事件的。?

方法二：

定時輪詢?

let timer = 0； timer = setInterval(() => {const style = {width: getStyle(dom, 'width'),height: getStyle(dom, 'height'),}; }, 200)

每過200ms，我們都進(jìn)行一次dom大小的獲取，從而和之前的寬高進(jìn)行對比，就能知道DOM是否發(fā)生了變化。

缺點：開銷太大。

方法三：

監(jiān)聽元素的滾動事件，在 目標(biāo) dom 里面包裹一個同等大小的 div，是隱藏不可見的，當(dāng)目標(biāo) dom 大小變化時，觸發(fā)滾動事件。

參考文章：巧妙監(jiān)測元素尺寸變化

方法四：

MutationObserver

通過 MutationObserver 監(jiān)聽dom 節(jié)點變化，MutationObserver 是在DOM4規(guī)范中定義的，它的前身是 MutationEvent 事件，該事件最初在 DOM2 事件規(guī)范中介紹，到來了 DOM3 事件規(guī)范中正式定義，但是由于該事件存在兼容性以及性能上的問題被棄用；可以用它來監(jiān)聽 dom style 的變化

參考文章：

Mutation Observer API

JS監(jiān)聽div的resize事件

方法五：

ResizeObserver

const resizeObserver = new ResizeObserver(entries => {for (let entry of entries) {console.log(entry.target.style.width)} }); resizeObserver.observe(document.querySelector('.line-numbers'));

參考文章：用vue.js如何實時獲取某個div的變化的width，并把數(shù)據(jù)展示在頁面？

方法六：

IE9-10 默認(rèn)支持 div 的 resize 事件，可以直接通過 div.attachEvent('onresize', handler); 的方式實現(xiàn);

其它瀏覽器,通過在 div 中添加一個內(nèi)置 object 元素實現(xiàn)監(jiān)聽,設(shè)置 object 元素的 style 使其填充滿 div，這樣當(dāng) div 的 size 發(fā)生變化時，object 的 size 也會發(fā)生變化,然后監(jiān)聽 object 元素的 contentDocument.defaultView(window對象)的 resize 事件。

參考文章：JS監(jiān)聽div的resize事件

項目使用分析?

第一，通過setInterval的方式進(jìn)行監(jiān)聽DOM變化，開銷較大。

第二，通過一個簡單的API，監(jiān)聽DOM，就進(jìn)行bind函數(shù)的綁定，解除一個DOM的監(jiān)聽，使用類似clear之類的函數(shù)解除監(jiān)聽。

第三，支持回調(diào)函數(shù)。

方法七：

Vue指令

參考文章：監(jiān)聽尺寸元素變化

方法八：

npm項目

例如：

element-resize-detector?

NPM倉庫：https://www.npmjs.com/package/element-resize-detector

1、安裝：

npm install element-resize-detector

2、使用?

var elementResizeDetectorMaker = require("element-resize-detector") var erd = elementResizeDetectorMaker()erd.listenTo(this.$el, function (element) {var width = element.offsetWidthvar height = element.offsetHeightthat.$nextTick(function () {console.log("Size: " + width + "x" + height)})})

wd-domsize-monitor

參考文章

vue中監(jiān)控元素大小變化element-resize-detector

vue+element項目里實時監(jiān)聽某個div寬度的變化，然后執(zhí)行相應(yīng)的事件

如何監(jiān)聽DOM大小的變化

js怎么監(jiān)聽div元素的resize

?

總結(jié)

以上是生活随笔為你收集整理的Vue + Element UI——监听DOM元素高度和宽度解决方案整理（八种方法）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。