前端监听dom元素在浏览器改变时的自适应问题

问题描述

在写vue的过程中，我们有一个固定的表头，在浏览器上面，大小为20px，然后下面是一个div，高度总是铺满屏幕的，显然设置为高度100%是不可取的；会有一个20px的下移。

解决办法

1 显然用setInterval去实时的获取dom元素的高度是可行的，但是在体验上是不好的。

2 在浏览器大小变化时，获取dom元素；这时通过$(selector).width这种方法，或者原生的方法去获取，总是获取的变化前的宽高，也是行不通的。不过这个时候可以这样去获取dom变化后的宽高：

  $(window).resize(function () {
        const width = getStyle($("#dv")[0], 'width');
        const height = getStyle($("#dv")[0], 'height');
    })

    function getStyle(ele, attr) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(ele, null)[attr];
        }
        return ele.currentStyle[attr];
    }

3 有时候dom元素不是通过浏览器宽高而改变的，这时我们可以这样去解决：

var observer = new ResizeObserver(function(entries){
        console.log(entries)
    })
    observer.observe($("#dv")[0])

综上所述，在监控dom元素时，第三种方案最好，但是对于一些低版本的浏览器存在着兼容问题。
这里还有一点需要注意，就是使用$(window).resize()的时候，有时候，我们渲染了vue，在mounted里使用了这个，当组件销毁时，没有关闭的话，会持续调用，从而报错，所以我们记得在destroyed里面$(window).off(“resize”)