ResizeObserver 元素始终为空

Question

我希望能够在我页面上的多个元素上使用 ResizeObserver，并且每个元素都会触发相同的函数调用（在已调整大小的元素上）。但遗憾的是，函数似乎接收的不是 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 和类名时，才会在警报对话框中显示 {}。这是我的 CodePen.

Answer 1

您可以通过 entry.target:

访问正在观察的元素

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

ResizeObserver 元素始终为空

ResizeObserver elements are always empty

javascript

json

stringify

resize-observer