ResizeObserver：如何检索调整大小元素的 Id？

Question

我正在使用 ResizeObserver 观察多个文本区域。 “for（让条目条目）”循环枚举所有条目，但我只需要已调整大小的元素的 id。 我试过 this.id 但它没有定义。

var myObserver = new ResizeObserver(entries => {

console.log(this.id);
  for (let entry of entries) {
    // do something
  }
});

var boxes = document.querySelectorAll('textarea');
boxes.forEach(box => {
  myObserver.observe(box);
});

Answer 1

多个文本区域可以同时更改/调整大小，因此需要使用数组来跟踪每个更改。 然而，大多数时候，只有一个元素会调整大小。 在这种情况下，您可以从entries中获取第一个元素，并获取其target.id值：

 const myObserver = new ResizeObserver(entries => { const [changed] = entries; console.log(changed.target.id); }); const boxes = document.querySelectorAll('textarea'); boxes.forEach(box => { myObserver.observe(box); });

 <textarea id="1">1</textarea> <textarea id="2">12</textarea> <textarea id="3">123</textarea>