时间戳

首页 > 解决方案 > 观察元素的尺寸变化

javascript - 观察元素的尺寸变化

问题描述

这不是重复的！我对其他答案的结果不满意。如果您仍然认为它是重复的，请在您认为它是重复之前评论它！

我必须观察元素的大小变化。我试图通过在offsetWidth属性上创建一个设置器来做到这一点，如下所示：

const div = document.querySelector("div");

div.addEventListener("resize", console.log);
div.addEventListener("click", () => console.log(div.offsetWidth));


let width = div.offsetWidth;
Object.defineProperty(div, "offsetWidth", {
    get: () => width,
  set: val => {
    width = val;
    div.dispatchEvent(new Event("resize"));
  }
});

document.querySelector("button").onclick = () => div.style.width = "200px";
div {
  background-color: #f00;
  width: 300px;
  height: 300px;
}
<div></div>
<button>
Set size
</button>

单击红色框以记录大小。然后按下按钮。什么都没发生。如果再次单击该框，它仍将显示旧尺寸。为什么这不起作用？

标签： javascripthtmlresizeoffsetwidth

解决方案

您是否考虑过使用ResizeObserver？

// get references to the elements we care about
const div = document.querySelector('.demo');
const button = document.querySelector('button');

// wire the button to resize the div
button.addEventListener('click', () => div.style.width = `${Math.random() * 100}%`);

// set up an observer that just logs the new width
const observer = new ResizeObserver(entries => {
  const e = entries[0]; // should be only one
  console.log(e.contentRect.width);
})

// start listening for size changes
observer.observe(div);
.demo { /* not really relevant. just making it visible. */
  background: skyblue;
  min-height: 50px;
}
<button>Change Size</button>
<div class="demo">Demo</div>

推荐阅读