Страницы

Поиск по вопросам

воскресенье, 9 июня 2019 г.

Можно ли определить высоту контента элемента, если контент просто текст?

Приведу пример ниже, что бы не разводить лишних дискуссий...
Вариант первый...
var textTwo = document.getElementById('text_two'); var textTwoChildren = textTwo.children; var parHeight = 0; for (var i = 0; i < textTwoChildren.length; i++) { parHeight += textTwoChildren[i].getBoundingClientRect().height; } console.log('parHeight -- ', parHeight) #text_two { overflow: hidden; position: absolute; top: 0; left: 0; width: 300px; height: 100px } p { background: orange; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita alias, obcaecati voluptatum. Dolorum illo id dolore optio fugiat autem a!QQQQ

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas accusantium eligendi magnam voluptatum officiis explicabo iste quod, eos possQQQQimus quo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, aliquam vero incidunt? Architecto aspernatur obcaecati esse commodi QQQQatque. Quidem, maxime.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor accusamus facere, animi, maiores numquam magni eveniet quam. DelectusQQQQ, dolor, optio!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque reprehenderit commodi deserunt sapiente magni perferendis explicabo maiores QQQQofficiis doloribus repellat.


И как мы видим из этого первого примера, контентом блока text_two являются элементы, мы можем узнать их высоту...

А вот во втором примере у нас просто контентом является текст
var textTwo = document.getElementById('text_two'); var textTwoChildren = textTwo.children; var parHeight = 0; for (var i = 0; i < textTwoChildren.length; i++) { parHeight += textTwoChildren[i].getBoundingClientRect().height; } console.log('parHeight -- ', parHeight) #text_two { overflow: hidden; position: absolute; top: 0; left: 0; width: 300px; height: 100px }
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia eaque odit autem sint aspernatur doloribus natus recusandae. Sequi praesentium officiis at fuga doloremque error aperiam vero accusamus optio assumenda quaerat similique perferendis vel, rerum quasi beatae officia ad nemo sint suscipit dolorum, sunt rem. Quidem eos illo et laborum quasi nihil

А что если, контентом блока text_two обычный текст, мы можем узнать высоту текста (контента)?
P.S. Я в курсе, что могу этот текст сунуть в тег p и определить высоту параграфа


Ответ

Можно проверять scrollHeight
const textTwoElement = document.querySelector('#text_two'); console.log(textTwoElement.scrollHeight) #text_two { overflow: hidden; position: absolute; top: 0; left: 0; width: 300px; height: 100px }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia eaque odit autem sint aspernatur doloribus natus recusandae. Sequi praesentium officiis at fuga doloremque error aperiam vero accusamus optio assumenda quaerat similique perferendis vel, rerum quasi beatae officia ad nemo sint suscipit dolorum, sunt rem. Quidem eos illo et laborum quasi nihil

Комментариев нет:

Отправить комментарий