Así que tengo un div con muchas imágenes:
<div id="d1"> <img id="img1" src="resources/square.png"/> <img id="img2" src="resources/square.png"/> ... </div>mi archivo css se ve así:
#d1 img { width: 5%; }Entonces, en lugar de recorrer todas las imágenes, ¿es posible modificar el atributo de ancho anterior usando javascript? (Quiero modificar el ancho de cada imagen)
Puede usar querySelectorAll y combinarlo con forEach para establecer un atributo para todas las imágenes dentro del contenedor.
window.onload = function loop() { document.querySelectorAll('#d1 img').forEach(el => el.setAttribute('width', '300')); } <div id="d1"> <img id="img1" src="https://via.placeholder.com/100.jpg;"/> <img id="img2" src="https://via.placeholder.com/100.jpg;"/> <img id="img3" src="https://via.placeholder.com/100.jpg;"/> <img id="img4" src="https://via.placeholder.com/100.jpg;"/> <img id="img5" src="https://via.placeholder.com/100.jpg;"/> </div>No tienes que hacer un bucle. Si usa variables CSS , puede configurar una variable en su archivo CSS que img usa inicialmente, y luego puede usar JS para actualizar esa variable para todas las imágenes.
setTimeout(() => { document.documentElement.style.setProperty('--width', '50%'); }, 2000); :root { --width: 5%; } #d1 img { width: var(--width); } <div id="d1"> <img id="img1" src="resources/square.png"/> <img id="img2" src="resources/square.png"/> </div>Algo como esto, usar querySelectorAll y un ciclo for puede hacer el truco y debería darte lo que quieres.
const images = document.querySelectorAll('#d1 img'); for(var i = 0; i < images.length; i++){ images[i].setAttribute("width", "5%") //Change this to any percent value. } <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div id="d1"> <img id="img1" src="https://cdn.pixabay.com/photo/2017/01/08/13/58/cube-1963036__340.jpg"/> <img id="img2" src="https://cdn.pixabay.com/photo/2017/01/08/13/58/cube-1963036__340.jpg"/> <img id="img3" src="https://cdn.pixabay.com/photo/2017/01/08/13/58/cube-1963036__340.jpg"/> </div> </body> </html> Una alternativa a usar un bucle for en querySelectorAll puede ser usar un bucle forEach , que le dará el mismo resultado.