Разверните div на определенную высоту в зависимости от объема текста

#javascript #css

#язык JavaScript #CSS

Вопрос:

Я установил высоту div на определенное значение, т. е. 60 пикселей. Я хочу, чтобы высота div увеличилась до 80 пикселей и 100 пикселей в зависимости от объема текста в div. Я пытался сделать это несколькими способами, но пока не нашел решения.

Вот мой код.

 HTML  lt;div id="header"gt;  lt;div class="header-text"gt;  lt;h3 class="card-title"gt;Text goes here, Text goes here, Text goes here, lt;/h3gt;  lt;h6 id="support-text"gt;supporting textlt;/h6gt;      lt;/divgt;    CSS  #header {  height: 60px;  width: 100%;  background-color: #f4f6f8;  display: flex;  justify-content: space-between;  align-items: center;  padding: 0px 20px;    }    Javascript    function increase() {  var text = parseInt(document.getElementById("header").style.height);  if (text lt; 80) {  document.getElementById("header").style.height = "60px";  } else if (text == 80) {  document.getElementById("header").style.height = "80px";  } else if (text gt; 80){  document.getElementById("header").style.height = "100px";  }    increase();

Ответ №1:

 lt;div id="test"gt;lt;/divgt;  lt;scriptgt;  const div = document.querySelector('#test'),  divHeight = div.offsetHeight;   if (divHeight === 72) {  div.style.height = '100px';  } lt;/scriptgt;

переменные и значения-это просто заполнители, вы можете их изменить.

1. В определенной степени это работает. Я хочу, чтобы div автоматически расширялся в зависимости от объема текста, однако в настоящее время мне все еще приходится вручную устанавливать высоту?

2. Я ссылался на ваш подход, вот почему. НО если вы хотите, чтобы высота div увеличивалась в зависимости от объема текста, удалите height и используйте minHeight = 60px вместо этого.

Ответ №2:

parseInt(document.getElementById("header").style.height)

Высота стиля вашего элемента будет точно такой, какой вы его зададите. Например "60px" .

Если вы хотите найти фактическую высоту div, вместо .style.height использования .clientHeight .

Если текст выходит за пределы высоты div, вы можете использовать .scrollHeight , чтобы получить полную высоту содержимого.