[英]Change attribute from data-src to src WITHOUT jQuery
我正在用純JavaScript構建一個燈箱。 我目前通過AJAX加載我的圖像,但我知道只需將img data-src屬性替換為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
。
獲取image元素的句柄,然后使用getAttribute()
的值設置它的src
屬性。
普通Javascript沒有任何輔助函數來處理data-*
屬性,它只是將它們視為任何其他屬性。
var img = document.getElementById("myimg");
img.src = img.getAttribute("data-src");
您可以將forEach
與querySelectorAll
forEach
使用
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' />
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.