Как получить attr img через native js?

195

25 января 2018, 20:55

Привет есть такой код

<div class="wrapper">
  <div class="item-wrapper"><img src="img1.png" alt="img1.png"></div>
  <div class="item-wrapper"><img src="img2.png" alt="img1.png"></div>
  <div class="item-wrapper"><img src="img3.png" alt="img1.png"></div>
  <div class="item-wrapper"><img src="img4.png" alt="img1.png"></div>
</div>

Надо что бы при клике на изображение получал атрибут src (надо именно на чистом js)

Answer 1

Атрибуты элемента хранятся в свойстве attributes в виде объектов DOMAttribute. Само текстовое значение хранится в атрибуте value. Объект по которому кликнули, передается в обработчик события в переменной this (конечно, если только обработчик не назначен при помощи атрибута onclick)

function imgClick() { 
  console.log(this.attributes['src'].value); 
} 
 
var imgs = document.querySelectorAll('.item-wrapper img'); 
for (var i = 0; i < imgs.length; i++) { 
  imgs[i].addEventListener('click', imgClick); 
}

<div class="wrapper"> 
  <div class="item-wrapper"><img src="img1.png" alt="img1.png"></div> 
  <div class="item-wrapper"><img src="img2.png" alt="img1.png"></div> 
  <div class="item-wrapper"><img src="img3.png" alt="img1.png"></div> 
  <div class="item-wrapper"><img src="img4.png" alt="img1.png"></div> 
</div>

Answer 2

Если ты хочешь получить ссылку на картинку, то надо брать не атрибут, а свойство:

var img = document.querySelector("img") 
console.log(img.src) 
console.log(img.getAttribute('src'))

<img src="abc/picture.png">

Answer 3

var img = document.getElementsByTagName('img'); 
 
for (var i = 0; i < img.length; i++) { 
  img[i].addEventListener('click', function() { 
    console.log(this.src); 
  }) 
}

img { 
  cursor: pointer; 
  width: 100px; 
  height: 100px; 
} 
 
.item-wrapper { 
  cursor: pointer; 
  width: 100px; 
  height: 100px; 
  background: red; 
}

<div class="wrapper"> 
  <div class="item-wrapper"><img src="https://i1.wallbox.ru/wallpapers/main/201328/053a2cd3b325001.jpg" alt="img1.png"></div> 
  <div class="item-wrapper"><img src="https://i1.wallbox.ru/wallpapers/main/201328/053a2cd3b325001.jpg" alt="img1.png"></div> 
  <div class="item-wrapper"><img src="https://i1.wallbox.ru/wallpapers/main/201328/053a2cd3b325001.jpg" alt="img1.png"></div> 
  <div class="item-wrapper"><img src="https://i1.wallbox.ru/wallpapers/main/201328/053a2cd3b325001.jpg" alt="img1.png"></div> 
</div>