Tengo una página web simple donde en la parte superior hay un div con esto:
<div class="divmain-login"> <div class="divmain-sup-login"> <div class="textos"> <h1>Manejo de archivos</h1> <h2>Gaspar Giménez 2021</h2><h3>v 1.2</h3> </div> </div> </div>Quiero tener la altura del atributo de este bloque (con la clase .divmain-sup-login) con este código JS:
function setDivSupHeight(){ const DivSup = document.querySelector(".divmain-sup-login"); console.log(DivSup.getAttribute("style")); const divh = DivSup.style.height; console.log(divh); } setDivSupHeight();La consola devuelve esto:
nulo (línea 3)
nada (línea 7)
El estilo del atributo devuelve nulo, y este es el CSS:
.divmain-sup-login{ position: sticky; background-color: #F56D7B; text-align: center; width: 100vw; height: 90px; display: flex; flex-flow: column wrap; justify-content: center; align-content: center; }No sé cómo puedo obtener la altura de este bloque.
Element.getAttribute('style') y Element.style se refieren al atributo style="..." del elemento, no a nada que provenga de las reglas de estilo o el estilo calculado final, y en su caso, ese atributo no se usó de hecho, así que su valor es null .
Lo que probablemente desee aquí es Element.getComputedValue().getProperty() , consulte https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle