cambiar ancho y alto de todas las imagenes de un div

[primary]

No consigo cambiar el ancho y alto de todas las imagenes dentro de un div.

Código HTML:

<div id="portadas">
   <img src="gato.png" width='400px' height='500'>
   <img src="coche.png" width='400px' height='500'>
   <img src="casa.png" width='400px' height='500'>
   <img src="jardin.png" width='400px' height='500'>
</div>
 
<script>
    div=document.getElementById("portadas");
    div.document.getElementsByName("img").width=600;
</script>
 

esto es solo un ejemplo de como lo intente.
No me funciona.

[__SDP__]

estimado,

debes recorrer los elementos que se encuentren dentro del div

Código Javascript:

var form= document.getElementById("portadas");
for (i=0;i<form.elements.length;i++)
{
     //creo que era asi???? si no funciona deja solo el 600 
     form.elements[i].style.width = '600px';
}
 

[Alexis88]

El método getElementsByName se utiliza para tomar elementos por el valor del atributo name y no por el nombre de su etiqueta, para lo cual deberías de usar el método getElementsByTagName. En cualquiera de ambos casos, lo que obtendrías será una lista de nodos, la cual debe de ser recorrida para aplicar la propiedad indicada —que en tu caso es el ancho— en cada uno de sus nodos.

Para que no te compliques, utiliza el método querySelectorAll con el cual puedes tomar elementos utilizando selectores CSS, luego, recorres la lista con el método forEach (para lo cual debemos de instanciar al objeto Array, aunque también podrías usar un bucle tradicional, como while o for) y en cada iteración, aplicas el valor deseado para el ancho en cada nodo.

Código Javascript:

[].forEach.call(document.querySelectorAll("#portadas img"), function(img){
    img.style.width = "600px";
});
 

Saludos