src和data-src屬性之間有什麼區別？

使用data-src或src屬性的img標記有什麼區別和後果（好與壞）？我可以使用兩者達到相同的結果嗎？如果是這樣，什麼時候應該使用它們中的每一個？src和data-src屬性之間有什麼區別？

來源

2013-03-10 Adam Pierzchała

133

屬性src和data-src沒有任何共同之處，不同之處在於它們都是由HTML5 CR允許並且它們都包含字母src。其他一切都不一樣。

src屬性在HTML規範中定義，它有一個功能含義。

data-src屬性只是data-*屬性的無限集中的一個，它沒有定義的含義，但可用於在元素中包含不可見數據，以用於腳本（或樣式）。

來源

2013-03-10 08:25:23

簡潔明瞭。公認。 – 2013-03-10 09:19:49

Angular.js也基於模型 – Jeff 2014-03-24 17:20:19

使用data-src作爲URL的後期綁定。Jeff你在想ng-src嗎？ https://docs.angularjs.org/api/ng/directive/ngSrc – Shanimal 2014-10-21 01:13:30

第一個<img />無效 - src是必填屬性。 data-src是一個屬性，不能被JavaScript所利用，但沒有表現意義。

來源

2013-03-10 07:46:14

我不清楚，請看我最新的問題。 – 2013-03-10 07:49:08

@AdamPierzchała要點是一樣的 - 對於這個問題沒有「或者/或」。必須包含'src'。您可以使用'data-'屬性爲腳本語言（如JavaScript）添加額外的數據來利用。 – 2013-03-10 07:53:43

-4

孔的數據src屬性只是用於例如將數據綁定ASP.NET ...

W3School src attribute

MSDN datasrc attribute

來源

2013-03-10 07:50:58 Mikatsu

如果要加載和顯示特定圖像的圖像，然後使用.src加載該圖片網址。

如果您想要一段可以包含URL的元數據（在任何標籤上），請使用data-src或您想要選擇的任何data-xxx。

數據-XXXX MDN文檔屬性：的srchttps://developer.mozilla.org/en-US/docs/DOM/element.dataset

實施例上，其中圖像將JPEG爲您並將其顯示一個圖像標記：的

<img id="myImage" src="http://mydomain.com/foo.jpg"> 

<script> 
    var imageUrl = document.getElementById("myImage").src; 
</script>

實施例 '數據-src' 中對在圖像尚未加載的非圖像標籤 - 它只是在div標籤的一塊元數據：

<div id="myDiv" data-src="http://mydomain.com/foo.jpg"> 

<script> 
    // in all browsers 
    var imageUrl = document.getElementById("myDiv").getAttribute("data-src"); 

    // or in modern browsers 
    var imageUrl = document.getElementById("myDiv").dataset.src; 
</script>

例data-src上用作地方來存儲替代圖像的URL的圖像標籤：

<img id="myImage" src="http://mydomain.com/foo.jpg" data-src="http://mydomain.com/foo.jpg"> 

<script> 
    var item = document.getElementById("myImage"); 
    // switch the image to the URL specified in data-src 
    item.src = item.dataset.src; 
</script>

來源

2013-03-10 07:56:03 jfriend00

data-src屬性是HTML5中引入的data- *屬性集合的一部分。 data-src允許我們存儲額外的數據，這些數據對瀏覽器沒有意義，但可以通過Javascript代碼或CSS規則使用。

來源

2017-10-19 18:39:59 ElomSkillupsoft

src和data-src屬性之間有什麼區別？

回答

相關問題