Problemas con console.log Jquery

Llevo ya un tiempo dándole vueltas y no entiendo por que no funciona esto.

He creado un código ultrasencillo

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF8_spanish">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    var imagenMaaya = $('#maaya');
          console.log($('#maaya').width());
</script> 
<title>PRUEBAS</title>
</head>
<body  >
<div id="contenedor">
    <img src="../../imagenes/maaya.jpg" alt="" id="maaya">
</div>
</body>
</html> 

Y estoy intentando aprender algo más sobre el tema de las dimensiones en jquery entonces lo que quiero hacer es saber por ejemplo es el ancho de esta imagen.

Por lo que he ideado este código

console.log($('#contenedor img').width())

Y si lo pruebo abriendo el navegador yéndome al apartado de consola y pegándolo, me funciona perfecto, me dice el ancho de la imagen, pero si lo cargo desde un script para que al cargar la imagen me salga ya directamente en el apartado consola, me pone null o indefined.

He borrado la cache de los navegadores, he usado internet explorer, mozilla, chrome y opera y en todos los casos me pasa igual, si lo copio directamente funciona si lo pongo como parte de la página en el script no funciona.

¿Alguien me puede decir por que no funciona como parte de un script?

1 respuesta

Respuesta

a)

Intenta con esto

Hola amigo(a)

Intenta con esto

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF8_spanish">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var imagenMaaya = $('#maaya').width();
console.log(imagenMaaya);
});
</script>
<title>PRUEBAS</title>
</head>
<body >
<div id="contenedor">
<img src="imagen.png" alt="" id="maaya" style="border: 3px solid #dadada;">
</div>
</body>
</html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF8_spanish">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var imagenMaaya = $('#maaya').width();
console.log(imagenMaaya);
});
</script>
<title>PRUEBAS</title>
</head>
<body >
<div id="contenedor">
<img src="imagen.png" alt="" id="maaya" style="border: 3px solid #dadada;">
</div>
</body>

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas