4

¿Alguien sabe cómo hacer en javascript para hallar el alto en pixeles de una imagen del cual no sabemos su tamaño y luego guardarlo en una variable para poder operar con él?

Intenté ya de muchas formas y no pude lograrlo.

Por ejemplo, intenté con:

var miVariable= document.getElementById ("id de la imagen").height;

Pero me tiraba error en chrome.

Pero sí me dejaba mostrar su valor por la consola de esta manera:

console.log (document.getElementById ("id de la imagen").height);

Dejo el código javascript y el html por si quieren verlo:

<!DOCTYPE html>
<html lang="es">

<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>Document</title>
  <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
  </script>

  <style>
    .corazonesImg {
      width: 4%;
    }
    
    .contenedorCorazon {
      display: inline;
    }
    
    #vida {
      position: absolute;
      left: 15px;
      top: 15px;
    }
    
  </style>
</head>

<body>
  <div id="vida">
    <div class="contenedorCorazon" id="contenedorCorazon1"><img src="corazon.png" class="corazonesImg" id="corazon1" alt=""></div>
    <div class="contenedorCorazon" id="contenedorCorazon2"><img src="corazon.png" class="corazonesImg" id="corazon2" alt=""></div>
  </div>
</body>

</html>

4
  • Exactamente, ¿qué error "te tira" chrome? Commented el 3 jul. 2019 a las 6:03
  • Te falta .styledocument.getElementById ("id de la imagen").style.height
    – x3k
    Commented el 3 jul. 2019 a las 6:16
  • 1
    @x3k_js , 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). Commented el 3 jul. 2019 a las 6:21
  • 1
    @OscarGarcia Pensaba que era único del atributo style, mea culpa! Gracias por la info.
    – x3k
    Commented el 3 jul. 2019 a las 6:25

1 respuesta 1

5

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.