[英]How to observer multiple elements with a ResizeObserver?
如何像所有文本區域一樣使用 ResizeObserver 觀察多個元素? 使用 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
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.