Hướng dẫn select image javascript

Question

I have two Images here and I want to show larger when Image clicked but it's only increase size of Image1 because of document.image[0] but how to create this for multiple image.

Note : I did this using document.getElementById('#').style.width; and it's works but is it possible to do this using 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>

Thank You to help me !

asked Oct 2, 2021 at 4:56

6

Here's an example that uses some of the suggestions from @SebastianSimon.

Event delegation.
CSS classes and classList.

We attach one listener to the document body, and then check the nodeName of the clicked element. If it's an image and the classList contains a specific class, replace that class with another. In this case we're replacing "large" with "small".

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" />

answered Oct 2, 2021 at 5:46

AndyAndy

56.7k12 gold badges64 silver badges91 bronze badges

document.images will give you an array like HTMLCollection

You have to select the image using index to access the image

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()">

If there are multiple images then you can pass the reference to function and then access the element and do as required

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)">

answered Oct 2, 2021 at 5:00

DecPKDecPK

23k5 gold badges20 silver badges39 bronze badges

9

I guess you want to change size of all the images when one image is clicked, so use the javascript selector function 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>

run the snippet and try it! if you find any defect please comment, but it worked!👍

Edit :-

you have asked to change the size of only on image, try this, it is 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>

that's all! if you find any problems again please comment!👍

answered Oct 2, 2021 at 5:47

1

programming javascript Select image JavaScript JavaScript image Add img js File upload HTML