将属性从data-src更改为src没有jQuery

我正在用纯JavaScript构建一个灯箱。我目前通过AJAX加载了我的图像，但我知道只需将img data-src属性替换为单击src即可。将属性从data-src更改为src没有jQuery

但是我不知道这是如何在纯JavaScript中完成的，我的意思是，没有使用任何库。

谁能告诉我这是怎么完成的？

总结：如何更改前：

<img data-src="URL"/>

到：

<img src="URL"/>

没有jQuery的。

来源

2013-10-12 Kristian Daugaard

您想要更改此操作？ – Kaf

只想做一个点击列表器。但我现在得到了答案:) –

你能做到如下所示：

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取代它。

Demo Fiddle

来源

2013-10-12 11:33:08 Harry

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

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

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

来源

2013-10-12 11:30:08 MrCode

将属性从data-src更改为src没有jQuery

回答

相关问题