ResizeObserver 元素始终为空

Question

我希望能够在页面上的多个元素上使用 ResizeObserver，并且每个元素都会触发相同的 function 调用（在调整大小的元素上）。 但遗憾的是，function 似乎接收的不是 DOM 对象，而是空对象。

给出一个或多个...

<div id="test" class="rg_toggle">Test</div>

...这个代码...

    function fixToggle( toggleElement) {
      alert(JSON.stringify(toggleElement, ["id", "className"));
    }

    const resizeObserver = new ResizeObserver(entries => {
      for (let entry of entries) {
        fixToggle(entry)
      }
    });

    const toggles = document.querySelectorAll('.rg_toggle');
    toggles.forEach(toggle => {
      resizeObserver.observe(toggle);
    });

当我期待 id 和类名时，只会在警报对话框中显示 {}。 这是我的代码笔。

Answer 1

您可以通过entry.target访问正在观察的元素：

const resizeObserver = new ResizeObserver((entries) => {
  for (let entry of entries) {
    fixToggle(entry.target);
  }
});