Повесить onclick на определенные картинки?

Question

[Vadim Stepanenko]

От апи я получаю html-разметку задания (для школы). В этой разметке могут быть как маленькие картинки (например, формулы, вычисления), так и большие (графики, карты и т.д.).

Нужно как-то парсить полученный html, получать изображения с шириной > 200 (условно) и вешать на них onClick как-то, но не совсем понимаю как это можно реализовать. Может кто-то сталкивался с подобным?

Answer 1

[0xD34F]

Нужно как-то парсить полученный html...

Не нужно.

Сделайте делегированный обработчик, где будет проверяться, кем является целевой элемент, и если это картинка - также проверяйте её размер.

Ну а вообще, ерундой какой-то занимаетесь - какой к чёрту html? Если используете react, то так дела не делаются.

Answer 2

[drawnofmymind]

допустим:

<img src="https://m.buro247.ru/images/senina/SpongeBob_stock_art.jpg.webp" alt="" class="hi">
<img src="https://m.buro247.ru/images/senina/SpongeBob_stock_art.jpg.webp" alt="" class="g">
<img src="https://m.buro247.ru/images/senina/SpongeBob_stock_art.jpg.webp" alt="" class="hi">

.hi{
  width:200px;
  height: 200px;
  border: 1px solid red;
}
.g{
  width:100px;
  height: 200px;
  border: 1px solid red;
}

document.querySelectorAll('img').forEach((item)=>{
	if(item.offsetWidth == 200){
  		item.setAttribute("onclick", "func")
  }
  console.log(item) 
})