首页 > 其他分享 >监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化

监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化

时间:2023-01-31 09:45:07浏览次数:61  
标签:SVGElement 边框 observe 内容 ResizeObserver Element

参考资料:ResizeObserver - Web API 接口参考 | MDN (mozilla.org)

搜索关键词:ResizeObserver

 

ResizeObserver

ResizeObserver 接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。

备注: 内容盒是盒模型放置内容的部分,这意味着边框盒减去内边距和边框的宽度就是内容盒。
边框盒包含内容、内边距和边框。有关进一步阐述,参见盒模型。

ResizeObserver 避免了通过回调函数调整大小时,通常创建的无限回调循环和循环依赖项。

它只能通过在后续的帧中处理 DOM 中更深层次的元素来做到这一点。如果它的实现遵循规范,则应在绘制前和布局后调用 resize 事件。

ResizeObserver.observe()方法

ResizeObserver 接口的 observe() 方法用于监听指定的 Element 或 SVGElement

resizeObserver.observe(divElem, { box : 'border-box' });

 

let chartDom = document.getElementById('myChart');
let myChart = echarts.init(chartDom);
// 若dom尺寸变化,则resize
 
const chartObserver = new ResizeObserver(() => {
    myChart.resize();
});
chartObserver.observe(chartDom);

 

标签:SVGElement,边框,observe,内容,ResizeObserver,Element
From: https://www.cnblogs.com/Tpf386/p/17077883.html

相关文章