轻作



重拾写作的乐趣

使用ResizeObserver监听元素大小变化

2020.03.06

在前端页面中,由于div元素没有相应onresize事件,当ECharts图形在容器div发生变化时,没有像浏览器窗口发生变化的时候能够自适应调整大小。

在窗口变化时,有效

// 正常
window.onresize = () => chart.resize();

在div容器变化时,无效

// 无效
document.querySelector('#chart').onresize = () => chart.resize();

其他JQuery的解决方案都太麻烦了,最简单的就是使用ResizeObserver API监听div容器的变化

(new ResizeObserver(() => chart.resize())).observe(document.querySelector('#chart'));

记得注意下浏览器兼容性

发表评论