Javascript увеличивать изображение при нажатии (без рамок)

Question

Я новичок в JS и здесь. Этот код позволяет загружать фотографии из JSON с ограничением размера фотографии. Как увеличить по клику?

function renderUserPhotos(data, container) {
  var content = "";
  for (i = 0; i < data.length; i++) {
    var title = data[i].title ? data[i].title : 'None';
    var url= data[i] ? data[i].url : null;
    var id = data[i].id;
    content += "<li class='photo'><img width='50px' src='" + url + "' /></li>";

Answer 1

Вы можете добавить eventListeners с чистым JS к любому элементу и манипулировать элементами CSS в функции события.

Таким образом, должно работать что-то вроде этого:

var elements = document.querySelectorAll('.photo img');
elements.forEach((element) => {
 element.addEventListener('click', function() {
   element.style.width = '100px';
 });
});

Примечание , что это можно вызвать только после того, как изображения будут фактически отрисованы. Альтернативой может быть добавление слушателя событий непосредственно в создание:

for (i = 0; i < data.length; i++) {
    var title = data[i].title ? data[i].title : 'None';
    var url= data[i] ? data[i].url : null;
    var id = data[i].id;

    // Create <li> element
    var content = document.createElement('li');
    content.classList.add('photo');

    // Create <img> element
    var img = document.createElement('img');
    img.src = url;
    img.style.width = '50px';

    // Register event listener
    element.addEventListener('click', function() {
     element.style.width = '100px';
    })

    // Append the image to the list element
    content.appendChild(img);

    ...
}