3

Приведу пример ниже, что бы не разводить лишних дискуссий...

Вариант первый...

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;
}
<div id="text_two">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita alias, obcaecati voluptatum. Dolorum illo id dolore optio fugiat autem a!QQQQ</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas accusantium eligendi magnam voluptatum officiis explicabo iste quod, eos possQQQQimus quo.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, aliquam vero incidunt? Architecto aspernatur obcaecati esse commodi QQQQatque. Quidem, maxime.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor accusamus facere, animi, maiores numquam magni eveniet quam. DelectusQQQQ, dolor, optio!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque reprehenderit commodi deserunt sapiente magni perferendis explicabo maiores QQQQofficiis doloribus repellat.</p>
</div>

И как мы видим из этого первого примера, контентом блока 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
}
<div id="text_two">
  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
</div>

А что если, контентом блока text_two обычный текст, мы можем узнать высоту текста (контента)?

P.S. Я в курсе, что могу этот текст сунуть в тег p и определить высоту параграфа

1 ответ 1

3

Можно проверять 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
}
<div id="text_two">
  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
</div>

1
  • Благодарю......
    – Air
    24 фев 2018 в 9:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.