帶有data- *前綴或不帶的自定義屬性？

HTML5規範定義瞭如何設置自定義使用數據 - 屬性*前綴，像：帶有data- *前綴或不帶的自定義屬性？

<div data-attr="somedata"></div>

但會是什麼區別，如果我們只是寫：

<div attr="somedata"></div>

實際上我更喜歡第二種方式，因爲它更短。
我可以使用getAttribute()方法訪問這兩個屬性。

那麼錯誤的是不使用數據前綴？我只在Chrome和IE11上測試過，所以也許還有其他瀏覽器需要擔心？

來源

2015-09-04 user3599803

基本原因是，將來你的'attr'可能被用作標準中的一個屬性。您的（可能）不符合標準的使用可能會導致任何問題。因此創建'data-'命名空間是爲了防止這種衝突。 – Sirko

這個問題類似於：我應該在「data-」中加入自定義屬性嗎？ http://stackoverflow.com/questions/2450585/why-should-i-prepend-my-custom-attributes-with-data/2451188#2451188 – ckckckc

可能的重複[爲什麼我應該用「data- 「？]（https://stackoverflow.com/questions/2450585/why-should-i-prepend-my-custom-attributes-with-data） – leemes

HTML5將data-*屬性定義爲有效，而其他自定義屬性不是。所以呢？

如果您通過HTML驗證程序運行代碼，它將查找無效屬性。除此之外，他們可能會指出一個錯字。 HTML5驗證器將接受data-*屬性，但它不是通靈。它無法判斷哪些其他新屬性是該計劃的一部分。
如果您創建一個新屬性，它可能無法很好地與HTML中的未來更改一起玩，這可能巧合地將相同的屬性名稱用於不同的目的。 data-*屬性免於未來的實現。
以上的推論是，包括額外的庫，也做任意改變可能會干擾你自己的代碼。
JavaScript通過在dataset屬性中爲每個元素自動收集這些屬性來配合data-*屬性。如果你構成另一個屬性，它將不會被包含。

如果上述要點都不重要，那麼請務必使用您喜歡的任何屬性名稱。關於上面的最後一點，您可以隨時使用JavaScript的*Attribute函數訪問您自己的任意屬性，這些函數在任何屬性上都能正常工作，而不管其有效性如何。

說到JavaScript，沒有關於JavaScript的HTML有效性的概念，並且您可以使用JavaScript來指定您喜歡的任何屬性名稱，而不用擔心HTML驗證器警察敲你的門。但是，您仍然冒着與其他庫或未來實現競爭的風險。

來源

2018-03-04 10:24:44 Manngo

帶有data- *前綴或不帶的自定義屬性？

回答

相關問題