Самый эффективный способ получить ширину div внутри контейнера ⇐ CSS
-
Anonymous
Самый эффективный способ получить ширину div внутри контейнера
У меня есть список текстовых меток, и мне нужно получить ширину этих меток при отображении в браузере. Поэтому я на лету создаю элемент-контейнер и добавляю к нему несколько элементов div.
const оболочка = document.createElement('div'); обертка.style.display = 'гибкий'; обертка.style.position = 'абсолютный'; text.forEach((t) => { const d = document.createElement('div'); d.textContent = t.headerName; оболочка.appendChild(d); }); document.body.prepend(обертка); Все это отображается в такой структуре:
ff | другое | col2andmore | Теперь мне нужно получить ширину каждого элемента. Я делаю это так:
const data = Array.from(wrapper.childNodes).map((n) => { возвращаться { ширина: n.offsetWidth, } }); Меня беспокоит производительность. У меня могут быть десятки тысяч таких элементов div. Я знаю, что при чтении offsetWidth браузеру приходится запускать перерасчет стилей. Мне интересно, какой самый эффективный способ получить эти числа из div? Я предполагаю, что, поскольку контейнер является абсолютным, перерасчет будет ограничен только этим элементом div и его дочерними элементами, а не всей страницей.
Какие у вас мысли или предложения?
У меня есть список текстовых меток, и мне нужно получить ширину этих меток при отображении в браузере. Поэтому я на лету создаю элемент-контейнер и добавляю к нему несколько элементов div.
const оболочка = document.createElement('div'); обертка.style.display = 'гибкий'; обертка.style.position = 'абсолютный'; text.forEach((t) => { const d = document.createElement('div'); d.textContent = t.headerName; оболочка.appendChild(d); }); document.body.prepend(обертка); Все это отображается в такой структуре:
ff | другое | col2andmore | Теперь мне нужно получить ширину каждого элемента. Я делаю это так:
const data = Array.from(wrapper.childNodes).map((n) => { возвращаться { ширина: n.offsetWidth, } }); Меня беспокоит производительность. У меня могут быть десятки тысяч таких элементов div. Я знаю, что при чтении offsetWidth браузеру приходится запускать перерасчет стилей. Мне интересно, какой самый эффективный способ получить эти числа из div? Я предполагаю, что, поскольку контейнер является абсолютным, перерасчет будет ограничен только этим элементом div и его дочерними элементами, а не всей страницей.
Какие у вас мысли или предложения?
