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

   
Vista:

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

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

Publicado por xve (1973 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

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