Javascript 在不使用jQuery的情况下将属性从数据src更改为src

我正在用纯JavaScript构建一个lightbox。我目前通过AJAX加载图像，但我知道只要将img data src属性替换为onclick to src就更容易了

然而，我不知道在纯JavaScript中如何做到这一点，我的意思是，不使用任何库

谁能告诉我这是怎么做到的

总而言之：我该如何更改ex:

<img data-src="URL"/>

致：

---

不使用jQuery。

获取image元素的句柄，然后使用

getAttribute（）

中的值设置它的

src

属性

普通Javascript没有任何帮助函数来处理

数据-*

属性，它只是将它们视为任何其他属性

var img = document.getElementById("myimg");
img.src = img.getAttribute("data-src");

---

您可以按如下所示进行操作：

var imgEl = document.getElementsByTagName('img');
for (var i=0; i<imgEl.length; i++) {
    if(imgEl[i].getAttribute('data-src')) {
       imgEl[i].setAttribute('src',imgEl[i].getAttribute('data-src'));
       imgEl[i].removeAttribute('data-src'); //use only if you need to remove data-src attribute after setting src
    }
}

var-imgEl=document.getElementsByTagName（'img'）；
对于（var i=0；i
上述代码将获取所有
img
标记，检查它们是否具有
data src
属性，如果存在，将其替换为
src

您可以将
forEach
与
querySelectorAll


var-imageElements=document.querySelectorAll（'img'）；
forEach（c=>c.setAttribute（'src'，c.getAttribute（'data-src'））；
img{宽度：100px；}
您想更改此操作吗？只想创建一个列表以供单击。但我现在得到了下面的答案：）
var imgEl = document.getElementsByTagName('img');
for (var i=0; i<imgEl.length; i++) {
    if(imgEl[i].getAttribute('data-src')) {
       imgEl[i].setAttribute('src',imgEl[i].getAttribute('data-src'));
       imgEl[i].removeAttribute('data-src'); //use only if you need to remove data-src attribute after setting src
    }
}