Establecí la altura de un div en un valor específico, es decir, 60 px. Quiero que la altura del div se expanda a 80 px y 100 px dependiendo de la cantidad de texto en el div. He intentado hacer esto de varias maneras, pero hasta el momento no he encontrado una solución.
Aquí está mi código.
HTML <div id="header"> <div class="header-text"> <h3 class="card-title">Text goes here, Text goes here, Text goes here, </h3> <h6 id="support-text">supporting text</h6> </div> 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 < 80) { document.getElementById("header").style.height = "60px"; } else if (text == 80) { document.getElementById("header").style.height = "80px"; } else if (text > 80){ document.getElementById("header").style.height = "100px"; } increase();<div id="test"></div> <script> const div = document.querySelector('#test'), divHeight = div.offsetHeight; if (divHeight === 72) { div.style.height = '100px'; } </script>las variables y el valor son solo marcadores de posición, puede cambiarlo.
parseInt(document.getElementById("header").style.height)
La altura de estilo de su elemento será exactamente lo que usted establezca. Por ejemplo "60px" .
Si desea encontrar la altura real del div, en lugar de .style.height use .clientHeight .
Si el texto va más allá de la altura del div, puede usar .scrollHeight para obtener la altura completa del contenido.