监听窗口、dom元素的属性变化

最新推荐文章于 2024-07-23 17:56:42 发布

nkxrb!

最新推荐文章于 2024-07-23 17:56:42 发布

阅读量1k

点赞数 1

分类专栏： web前端文章标签： html javascript

本文链接：https://blog.csdn.net/kw023781/article/details/107373248

版权

本文探讨了如何在JavaScript中监听窗口和DOM元素的属性变化，包括window.onresize事件、ResizeObserver API以及MutationObserver的使用。由于ResizeObserver不支持IE，作者转向MutationObserver，发现它无法监听百分比宽度和高度的变化。最后提出了通过获取父级元素尺寸来动态调整Echarts图表大小的解决方案。

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

前言

对于图表相关的div，当加载echarts时，希望canvas的宽高能随着所在容器自适应调节大小，因为所用容器都是百分比等份布局，所以想使用echarts的API resize方法实现大小的动态调整。

研究历程

1.window.onresize

首先想到的是window有没有类似的监听事件，好通过它来实现，搜了下，果然有window.onresize = function(){xxxx}

// 写法一、
<body onresize="alert('You have changed the size of the window')">

</body>

// 写法二、
<script>
   window.onresize = function(){
   
   	  alert('You have changed the size of the window')
   }
</script>

2.ResizeObserver

无意中，发现了这个API，高性能监听元素的大小变化，写法简单，但很遗憾😡 IE 不支持，😔哎~~~
我是从这个网站看到的 MDN，很不错的网站

// 新建监听对象 entries 就是下面 observe（） 添加的dom元素
const resizeObserver = new ResizeObserver(entries => {
   
  for (let entry of entries) {
   
    console.log(entry) // 在此处写监听到变化后做的操作
  }
});
// 给监听对象上添加要监听的dom元素
resizeObserver.observe(document.querySelector('div'));