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:
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:
He probado con diferentes formas de llamar a la imagen y aun así no he tenido éxito.
Mil gracias!
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
0
