该API可以监听元素内容区域边框的改变,内容区域不包括padding
示例:以下示例通过观察 box 的宽度变化从而改变其边框圆角半径。
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
entry.target.style.borderRadius = Math.max(0, 250 - entry.contentRect.width) + 'px';
}
});
resizeObserver.observe(document.querySelector('.box:nth-child(2)'));
三个方法
应用: vueuse中 useElementSize 使用了该API
MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver