Question

如何使用ResizeObserver观察多个元素（如所有textareas）？使用document.querySelectorAll（）会导致错误。

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返回一个NodeList，您可以使用.forEach遍历每个变量并将其传递给观察者：

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>

编辑：您也可以一次观察单个元素，但需要分别对其进行初始化：

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>

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

1 个答案: