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);
}
});