Tengo dos imágenes aquí y quiero mostrarlas más grandes cuando se hace clic en la imagen, pero solo aumenta el tamaño de la imagen 1 debido a document.image [0], pero cómo crear esto para varias imágenes.
Nota: Hice esto usando document.getElementById('#').style.width; y funciona, pero ¿es posible hacer esto usando document.images ?
function iw(){ var num = document.images[0].style.width; if (num == '300px') { document.images[0].style.width='500px' } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <img src="https://cdn-prod.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg" style="width:300px;" onclick="iw()"> <img src="https://cdn-prod.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg" style="width:300px;" onclick="iw()"> </body> </html>¡Gracias por ayudarme!
Aquí hay un ejemplo que usa algunas de las sugerencias de @SebastianSimon.
Delegación de eventos.
Clases CSS y classList .
Adjuntamos un oyente al cuerpo del documento y luego verificamos el nombre de nodeName del elemento en el que se hizo clic. Si es una imagen y classList contiene una clase específica, reemplace esa clase con otra. En este caso estamos reemplazando "grande" con "pequeño".
document.body.addEventListener('click', handleClick, false); function handleClick(e) { const { nodeName, classList } = e.target; if (nodeName === 'IMG') { if (classList.contains('large')) { classList.replace('large', 'small'); } } } .small { height: 100px; width: 50px; background-image: url('https://dummyimage.com/50x100/aa7777'); } .medium { height: 100px; width: 100px; background-image: url('https://dummyimage.com/100x100/77aa77/000'); } .large { height: 100px; width: 300px; background-image: url('https://dummyimage.com/300x100/7777aa/000'); } <img class="medium" /> <img class="large" /> <img class="medium" /> <img class="small" /> <img class="small" /> <img class="large" />document.images le dará una matriz como HTMLCollection
Tienes que seleccionar la imagen usando index para acceder a la imagen
var num = document.images[0].style.width; console.log(document.images); function iw() { var num = document.images[0].style.width; if (num == '300px') { alert('Image clicked'); } } <img src="https://cdn-prod.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg" style="width:300px;" onclick="iw()">Si hay varias imágenes, puede pasar la referencia a la función y luego acceder al elemento y hacer lo requerido
function iw(el) { var num = el.style.width; if ( num == '300px' ) { alert( 'Image clicked' ); } } <img src="https://cdn-prod.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg" style="width:300px;" onclick="iw(this)"> <img src="https://cdn-prod.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg" style="width:300px;" onclick="iw(this)">Supongo que desea cambiar el tamaño de todas las imágenes cuando se hace clic en una imagen, así que use la función de selector de JavaScript getElementsByTagName
var images = document.getElementsByTagName("img"); function enlarge() { for(let i = 0; i < images.length; ++i) { images[i].width = 200; } } <img src="https://wallpaperaccess.com/full/211818.jpg" onclick="enlarge()" width=100> <img src="https://i.pinimg.com/originals/cc/18/8c/cc188c604e58cffd36e1d183c7198d21.jpg" onclick="enlarge()" width=100>¡ejecuta el fragmento y pruébalo! si encuentra algún defecto, comente, ¡pero funcionó! 👍
Editar :-
ha pedido cambiar el tamaño de solo en la imagen, intente esto, es simple
var images = document.getElementsByTagName("img"); function enlarge(el) { el.width = 200; } <img src="https://wallpaperaccess.com/full/211818.jpg" onclick="enlarge(this)" width=100> <img src="https://i.pinimg.com/originals/cc/18/8c/cc188c604e58cffd36e1d183c7198d21.jpg" onclick="enlarge(this)" width=100>¡eso es todo! si encuentra algún problema nuevamente, ¡coméntelo! 👍