可以监听Element的接口——ResizeObserver

最新推荐文章于 2024-07-09 23:33:54 发布

夕良pro

最新推荐文章于 2024-07-09 23:33:54 发布

阅读量311

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/sinat_27631861/article/details/115318922

版权

当需要根据单个DOM元素的大小变化来调整页面布局时，ResizeObserver接口成为了一个理想的选择。它能替代window.onresize，精确地监听指定DOM元素的尺寸变化。在示例中，创建了一个ResizeObserver实例，观察并响应'dec-charts-block'元素的尺寸变化，从而实现自适应布局。MDN提供了详细的构造器和属性说明。

摘要由CSDN通过智能技术生成

ResizeObserver接口解释MDN链接

工作期间遇到需要监听单个dom的情况，需要根据单个dom的大小变化进行页面的自适应操作，此时用window.onresize就不合适了，因为这个接口无法监听单个dom，监听的是整个窗口，无法处理这个问题。而这个时候，ResizeObserver就可以做出比较好的应对。

const resizeObserver = new ResizeObserver(entries => {
      this.resize()
    }, 300)
resizeObserver.observe(document.getElementById('dec-charts-block'))

MDN中有详细的构造器和属性的解释，我这里直流一个简单的使用，其中resize方法是用来自适应的方法。