将属性从 data-src 更改为 src WITHOUT jQuery

Change attribute from data-src to src WITHOUT jQuery

本文关键字：src WITHOUT jQuery 属性 data-src      更新时间：2023-09-26

我正在用纯JavaScript构建一个灯箱。我目前通过 AJAX 加载我的图像，但我知道在单击到 src 时替换 img data-src 属性更容易。

然而，我不知道如何在纯JavaScript中完成此操作，我的意思是，不使用任何库。

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

总结一下：我如何更改例如：

<img data-src="URL"/>

自：

<img src="URL"/>

没有jQuery。

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

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
    }
}

上面的代码将获取所有img标签，检查它们是否具有 data-src 属性，如果存在，则将其替换为 src 。

演示小提琴

获取图像元素的句柄，然后使用 getAttribute() 中的值设置其src属性。

Plain Javascript 没有任何辅助函数来处理data-*属性，它只是将它们视为任何其他属性。

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

您可以将forEach与querySelectorAll一起使用 

var imageElements = document.querySelectorAll('img');
   
imageElements.forEach(c=> c.setAttribute('src',c.getAttribute('data-src')));
img{width:100px;}
<img data-src='https://cdn4.iconfinder.com/data/icons/nature-20/512/79-512.png' />

相关文章：