Приведу пример ниже, что бы не разводить лишних дискуссий...
Вариант первый...
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 }
А что если, контентом блока 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
}
Комментариев нет:
Отправить комментарий