如何使用 ResizeObserver 观察多个元素？

Question

How do I observe multiple elements with ResizeObserver like all textareas? Using document.querySelectorAll() results in an error.

var ro = new ResizeObserver( entries => {
  for (let entry of entries) {
     // do something
  }
});

// Works
ro.observe(document.querySelector('textarea'));

// Doesn't work
ro.observe(document.querySelectorAll("textarea"));


Error: VM112:8 Uncaught TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'.
    at <anonymous>:8:4

Answer 1

querySelectorAll returns aNodeList , you can use .forEach to iterate over each and pass it into the observer:

 const boxes = document.querySelectorAll('.box'); const myObserver = new ResizeObserver(entries => { for (let entry of entries) { const width = Math.floor(entry.contentRect.width); const height = Math.floor(entry.contentRect.height); entry.target.value = `I'm ${ width }px and ${ height }px tall`; } }); boxes.forEach(box => { myObserver.observe(box); });

 .box { text-align: center; border: 1px solid black; height: 100px; border-radius: 8px; display: flex; }

 <textarea class="box"> </textarea> <textarea class="box"> </textarea>

EDIT: You could also observe single element at a time but they need to be initialized individually:

 const boxes = document.querySelectorAll('.box'); boxes.forEach(box => { new ResizeObserver(entries => { const width = Math.floor(entries[0].contentRect.width); const height = Math.floor(entries[0].contentRect.height); entries[0].target.value = `I'm ${ width }px and ${ height }px tall`; }).observe(box); });

 .box { text-align: center; border: 1px solid black; height: 100px; border-radius: 8px; display: flex; }

 <textarea class="box"> </textarea> <textarea class="box"> </textarea>