0
252
Views¿Cómo obtener la altura exacta del contenido dentro del div usando javascript?
Estoy tratando de obtener la altura exacta del contenido dentro del div. Puedo obtener el valor exacto cuando no hay una imagen dentro del contenedor. pero si hay una imagen dentro, da un resultado incorrecto, ¿por qué?
Estoy usando clientHeight y offsetHeight ambos dan un resultado incorrecto.
aquí está mi código https://codesandbox.io/s/cold-browser-dxj51?file=/index.html:907-919
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> <style> * { padding: 0; margin: 0; } .container { padding: 20px; width: 200px; background-color: #eeeeee; } .logo img { width: 100%; } .logo { padding-bottom: 30px; } </style> </head> <body> <div class="container"> <div class="logo"> <img src="1.png" /> </div> <div class="abc"> This is a static template, there is no bundler or bundling involved! </div> </div> <script> console.log(document.querySelector(".container").clientHeight); console.log(document.querySelector(".container").offsetHeight); </script> </body> </html> Salida esperada : 154px+ 20px+20px =(194px)
misalida : 142px
1 answers
Answer question0
El problema es que su javascript no está esperando la carga completa de la imagen antes de verificar su altura. Puede usar el detector de eventos "cargar" para activar con éxito el script que desea, una vez que los recursos dependientes hayan terminado de cargarse:
window.addEventListener("load", event => { console.log(document.querySelector(".container").clientHeight); console.log(document.querySelector(".container").offsetHeight); });El código anterior le dará el resultado deseado.