問題描述

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

解決方案

方法一：?

監聽window變化，再改變對應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]; }

通過這樣的方式可以進行監聽DOM元素的變化，但是不是最完善的。

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

方法二：

定時輪詢?

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

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

缺點：開銷太大。

方法三：

監聽元素的滾動事件，在 目標 dom 里面包裹一個同等大小的 div，是隱藏不可見的，當目標 dom 大小變化時，觸發滾動事件。

參考文章：巧妙監測元素尺寸變化

方法四：

MutationObserver

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

參考文章：

Mutation Observer API

JS監聽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，并把數據展示在頁面？

方法六：

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

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

參考文章：JS監聽div的resize事件

項目使用分析?

第一，通過setInterval的方式進行監聽DOM變化，開銷較大。

第二，通過一個簡單的API，監聽DOM，就進行bind函數的綁定，解除一個DOM的監聽，使用類似clear之類的函數解除監聽。

第三，支持回調函數。

方法七：

Vue指令

參考文章：監聽尺寸元素變化

方法八：

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中監控元素大小變化element-resize-detector

vue+element項目里實時監聽某個div寬度的變化，然后執行相應的事件

如何監聽DOM大小的變化

js怎么監聽div元素的resize

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。