簡體   English   中英

將屬性從data-src更改為src with without jQuery

[英]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");

您可以將forEachquerySelectorAll 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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM