基础用法:
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
console.log('大小位置', entry.contentRect)
entry.target.style.borderRadius = Math.max(0, 250 - entry.contentRect.width) + 'px'; // entry.target可以拿到当前的dom,然后设置borderRadius
}
});
resizeObserver.observe(document.querySelector('.box:nth-child(2)'));
你会发现以上的事件不仅执行一次,但是我们只想要执行一次,可是使用防抖的原理:
let timer = null
const resizeObserver = new ResizeObserver(entries => {
if(timer) clearTimeout(timer)
timer = setTimeout(()=>{
console.log("宽度变化了")
},100)
});
resizeObserver.observe(document.querySelector('.box:nth-child(2)'));