JavaScript - Cambiar estilo de imágenes (width, height...) con JS

 
Vista:
sin imagen de perfil
Val: 3
Ha aumentado su posición en 59 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar estilo de imágenes (width, height...) con JS

Publicado por José Joaquín (2 intervenciones) el 08/12/2017 01:22:40
Buenas a todos,

Tengo un problema y es que cuando tengo una imagen y hago una función simple para cambiarle el ancho con JavaScript (nada de JQuery o cualquier otra librería), no me permite realizar el cambio. Creo que el código ni siquiera es capaz de llegar a la variable.

Os lo expongo para poder mostrarlo mejor:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
    <head>
        <title>Ej 2 - Moneda</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            /* Estilo CSS */
            img#idcara{
/*                width: 100px;
                height: 100px;
                top: 150px;
                left: 150px;
                position: absolute;*/
            }
        </style>
        <script type="text/javascript">
            function CambiarAncho(){
                document.images.idcara.width = 200;
                console.log("Se llama a la función");
            }
        </script>
    </head>
    <body onload="">
        <img name="nmcara" id="idcara" style="" src="cara.png" />
        <input type="button" name="boton" value="Cambiar propiedad" onclick="CambiarAncho()"/>
    </body>
</html>

Si añado cualquier propiedad CSS mediante las etiquetas <style> o dentro de la propia definición de la imagen dentro de <img> directamente no me deja cambiarla.

Además, el código no es capaz de tomar el valor del ancho, ejemplo:
1
2
var imagen = document.getElementById("idcara");
var ancho = imagen.width;

He probado con diferentes formas de llamar a la imagen y aun así no he tenido éxito.

Mil gracias!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 2.186
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar estilo de imágenes (width, height...) con JS

Publicado por xve (2068 intervenciones) el 08/12/2017 08:57:31
Hola José, si vas por estilos, creo que tienes que cambiar el tamaño mediante estilos... algo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
    <head>
        <title>Ej 2 - Moneda</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            /* Estilo CSS */
            img#idcara{
                width: 100px;
                height: 100px;
                top: 150px;
                left: 150px;
                position: absolute;
            }
			img#idcara.otroTamano {width:200px;}
        </style>
        <script type="text/javascript">
            function CambiarAncho(){
                //document.images.idcara.width = "200px";
                document.images.idcara.className="otroTamano";
                console.log("Se llama a la función");
            }
        </script>
    </head>
    <body onload="">
        <img name="nmcara" id="idcara" src="sprite.png" />
        <input type="button" name="boton" value="Cambiar propiedad" onclick="CambiarAncho()"/>
    </body>
</html>

Te sirve?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 3
Ha aumentado su posición en 59 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar estilo de imágenes (width, height...) con JS

Publicado por José Joaquín (2 intervenciones) el 08/12/2017 12:09:56
Buenas, gracias por la respuesta.

El caso es que así lo he intentado poner también y sigue sin cambiarme ningún aspecto de la imagen.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Cambiar estilo de imágenes (width, height...) con JS

Publicado por Miguel (1 intervención) el 14/12/2017 11:50:20
Prueba:

document.getElementById("idcara").style.width="200px";
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad