HTML5自定義屬性 - 爲什麼要使用它們？

我似乎無法理解爲什麼我應該對使用自定義屬性的HTML5感到滿意？ 我爲什麼要使用它們？HTML5自定義屬性 - 爲什麼要使用它們？

2011-02-17 Kriem

我假設您引用了HTML5 [data-*]屬性。

的好處是，你可以很容易地編寫一些腳本的數據與您的元素，而無需插入內嵌的JavaScript所有的地方，這將是有效的HTML5關聯（語義依舊，但不顯示）。要在HTML4中做同樣的事情，需要指定一個自定義名稱空間，並添加一些名稱空間屬性。

說你有項出售的列表，你可能要存儲數字的價格，但不嘗試解析字符串：如果你讓你的用戶標記多個不同的項目

<ul> 
    <li data-price="5">Item 1 is only $5 this week!</li> 
    <li data-price="1">Sale on Item 2, only $1</li> 
    ... 
</ul>

要購買，您可以輕鬆提取數字值以顯示運行總計。

或者，您可以將數字放在具有特定類的跨度中，在正確的項目上找到正確的跨度，然後將值拉出來，但[data-*]屬性會減少執行必要的標記/腳本的數量一樣的東西。

如果你不想使用它，你不需要。將數據與元素關聯的方法有很多，這只是一個新的方法。

此外，新的dataset JavaScript API提供了一種聲明式訪問存儲在[data-*]屬性中的值的一致方法。

對於jQuery用戶，.data()和.attr()可用於訪問[data-*]屬性和I have written up a detailed answer on when you would want to use one over the other。

來源

2011-02-17 18:27:39 zzzzBov

自定義屬性已經被廣泛使用，例如這裏的an example from dojoToolkit（）：

<div style="width: 350px; height: 300px"> 
    <div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;"> 
     <div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true"> 
      Lorem ipsum and all around... 
     </div> 
     <div dojoType="dijit.layout.ContentPane" title="My second tab"> 
      Lorem ipsum and all around - second... 
     </div> 
     <div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true"> 
      Lorem ipsum and all around - last... 
     </div> 
    </div> 
</div>

這可能現在被重新編寫，以便標記驗證使用屬性喜歡data-dojoType。它們還允許您將應用程序特定的數據存儲在您的標籤中，而不是在類屬性中進行剽竊。

There's a good introduction to data-* attributes on HTML5 Doctor。

來源

2011-02-17 18:28:17 robertc

我發現了另一個使用了數據 - 屬性：

您可以使用工具提示新的HTML5自定義屬性data-：Semantic Tooltips With Pure CSS3 and HTML5.

來源

2011-02-18 13:22:07 Kriem

這就是'title`屬性是什麼。特別是使用`a`，`abbr`和`dfn`標籤。如果您使用數據屬性工具提示，則無法訪問。 – zzzzBov 2011-02-18 16:15:46

使用data-自定義屬性是未來驗證您的HTML5頁，沒有未來的瀏覽器秉承規範將使用data-[attribute]因此不會與您的自定義屬性衝突。

來源

2014-12-03 08:41:35 user2971380