Edición tras publicar código javascript y HTML completo:
Tal y como supuse, el problema lo tienes por tratar de acceder a un elemento por su id
cuando aún no ha sido creado.
Tienes varias soluciones. Las ordeno de menor a mayor complejidad o esfuerzo:
Mover <script>
al final
En el siguiente ejemplo ejecuto el código javascript al final del documento, cuando el DOM ha sido generado completamente.
.corazonesImg { width: 4%; }
.contenedorCorazon { display: inline; }
#vida { position: absolute; left: 15px; top: 15px; }
<div id="vida">
<div class="contenedorCorazon" id="contenedorCorazon1"><img src="https://cdn.pixabay.com/photo/2017/10/26/23/58/rose-2892821_960_720.jpg" class="corazonesImg" id="corazon1" alt="Rosa"></div>
</div>
<!-- Colocamos la carga de "archivo.js" al final del documento HTML
(antes de </html>, por ejemplo) -->
<script src="archivo.js"></script>
<script>
/* Simulamos la ejecución del contenido de "archivo.js" aquí: */
var vMin = document.getElementById("corazon1").height; //ACA ES DONDE ME TIRA ERROR
console.log('Valor de vMin:', vMin);
</script>
Usando el atributo defer
Como no disponemos de un servidor para realizar alojamiento de archivos, en el siguiente código simulo el funcionamiento de "defer":
.corazonesImg { width: 4%; }
.contenedorCorazon { display: inline; }
#vida { position: absolute; left: 15px; top: 15px; }
<!-- Usamos el atributo "defer" -->
<script src="archivo.js" defer></script>
<div id="vida">
<div class="contenedorCorazon" id="contenedorCorazon1"><img src="https://cdn.pixabay.com/photo/2017/10/26/23/58/rose-2892821_960_720.jpg" class="corazonesImg" id="corazon1" alt="Rosa"></div>
</div>
<script>
/* Simulamos que la ejecución del contenido de "archivo.js" se hace tras la carga del DOM: */
var vMin = document.getElementById("corazon1").height; //ACA ES DONDE ME TIRA ERROR
console.log('Valor de vMin:', vMin);
</script>
Esperar al evento DOMContentLoaded
Requiere de una reestructuración más compleja del código, pero es la más recomendable:
.corazonesImg { width: 4%; }
.contenedorCorazon { display: inline; }
#vida { position: absolute; left: 15px; top: 15px; }
<!-- Podemos seguir haciendo uso de "defer" o "async" -->
<script src="archivo.js"></script>
<script>
/* Ejecutamos el código cuando el DOM haya sido cargado: */
window.addEventListener('DOMContentLoaded', evento => {
var vMin = document.getElementById("corazon1").height; //ACA ES DONDE ME TIRA ERROR
console.log('Valor de vMin:', vMin);
});
</script>
<div id="vida">
<div class="contenedorCorazon" id="contenedorCorazon1"><img src="https://cdn.pixabay.com/photo/2017/10/26/23/58/rose-2892821_960_720.jpg" class="corazonesImg" id="corazon1" alt="Rosa"></div>
</div>
Respuesta original
Siempre que el DOM haya sido generado (ver comentarios al final de la respuesta), tendrás disponible las siguientes propiedades de una imagen <img>
:
HTMLImageElement.naturalHeight
Read only: Devuelve un unsigned long
que representa el alto intrínseco de la imagen en píxeles CSS, si está disponible, de otro modo, es 0
.
HTMLImageElement.height
: Es un unsigned long
que refleja el atributo HTML height
, indica el alto de la imagen en píxeles CSS.
Element.getBoundingClientRect()
: El valor devuelto es un objeto DOMRect
que es la unión de los rectángulos devueltos por getClientRects()
para el elemento, es decir, las CSS border-boxes
asociadas con el elemento.
Un ejemplo de uso podría ser el siguiente:
let mostrar = () => {
let imagen = document.getElementById("imagen");
console.log('imagen.height: ', imagen.height);
console.log('imagen.naturalHeight: ', imagen.naturalHeight);
let recuadro = imagen.getBoundingClientRect();
console.log('recuadro.bottom - recuadro.top: ', recuadro.bottom - recuadro.top);
}
<button onclick="mostrar()">Mostrar datos</button>
<p><img id="imagen" src="https://cdn.pixabay.com/photo/2017/10/26/23/58/rose-2892821_960_720.jpg" alt="Rosa" width="50%" /></p>
Una de las causas que podría generar el problema que apuntas en la pregunta podría ser tratar de acceder al elemento antes de que el DOM asociado haya sido generado, pero sin el código completo ni el mensaje de error exacto no podremos descartar esa posibilidad.
.style
►document.getElementById ("id de la imagen").style.height
HTMLImageElement.height
es una propiedad perfectamente válida, por lo que el error podría estar siendo generado por no existir el ID (no haberse generado el DOM del elemento a analizar).style
, mea culpa! Gracias por la info.