HTML 5：你必須知道的data屬性

HTML 5的Data屬性可讓你給元素自定義數據。這篇文章就是思考怎麼更好的使用Data屬性。

**介紹**

HTML 5以前，咱們必須依賴於class和rel屬性來存儲須要在網站中使用的數據片斷，這種作法有時會在網站的外觀和實用性之間產生衝突。而HTML 5 Data屬性的存在就能很好知足須要。

隨着網站自身的數據愈來愈多，一些特定的元素也開始保存數據了。好比，要建立一個audio應用，代碼以下：

<audio controls="controls">
  <source src="track1.mp3" type="audio/mpeg" />
</audio>

上面的代碼是徹底可以接受的，可是有時咱們須要保存時長、速度和做者等更多關於音頻自己的信息，而不是音頻來源。這就須要用到Data屬性了，示例以下：

<audio controls="controls">
  <source src="track1.mp3" type="audio/mpeg" data-duration="1min5secs" data-tempo="125bpm" data-artist="The Beatles" />
</audio>

經過這些自定義的Data屬性，就可以對audio執行搜尋、過濾以及分組等動做。

怎麼使用Data屬性

自定義的Data屬性的名字必須以data-開頭，而且連字號後面至少要有一個符合HTML規範的字符。（HTML naming convention.）

W3C文檔對Data屬性的說明以下：

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

這也意味着咱們只能在應用程序內部使用data數據，而不該該將它呈現給用戶。更重要的是你能夠給元素自定義任何數量的Data屬性，並賦予任何有意義的值。

何時須要使用Data屬性？

經過上面的講述，已經知道怎麼使用Data屬性了。但爲了更好地瞭解這個屬性，再看幾個例子。

在Tuts+的Webdesign板塊已經有了很好地、關於使用data屬性的例子。One of the tuts，將Data屬性運用到樣式中，讓菜單有一個「氣泡」通知效果。在這個示例中，data屬性被用於只想氣泡通知的值。

<a href="#" class="pink" data-bubble="2">Profile</a>

另一個示例：quick tip，Data屬性做爲提示信息是怎麼被用於提示框的

<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>

何時不應用Data屬性？

當元素已經創建或者更適當的屬性時，就不該該用Data屬性了。在下面這個示例中運用data是不合適的：

<span data-time="20:00">8pm<span>

由於在一個表示時間的元素中，已經有一個datetime屬性了：

<time datetime="20:00">8pm</time>

同時，Data屬性不該該被用做一個可替代的元數據或者微格式。微格式主要是爲人類設計的、用於介紹上下文信息的。好比，若是你有一張關於我的或者某個組織聯繫信息的Vcard,你應該賦予一個名爲vcard的class屬性，讓機器明白它包含了一些聯繫的信息。

利用微格式的代碼以下：

<div class="vcard">
    <span class="fn " >Aaron Lumsden</span>
</div>

相反，利用Data屬性的代碼以下：

<div class="vcard">
    <span data-name="Aaron Lumsden " >Aaron Lumsden</span>
</div>

瞭解更多關於微格式的信息：Mircorformats.org.

在CSS中使用Data屬性

既然在HTML標記中實現了Data屬性，那麼也能夠在CSS中使用這個屬性了。注意：儘管在某些狀況下更適合直接使用Data屬性，那也不該該對任何樣式規則直接使用該屬性。簡單的使用以下：

[data-role="page"] {
  /* Styles */
}

在JQuery中使用Data屬性

在JQuery中怎麼使用Data屬性呢？JQuery提供了不少種從元素獲取數據的方式。例如，像下面這樣：

<a href="http://www.google.com" class="button" data-info="The worlds most popular search engine">Google</a>

若是有一個和上面相似的錨文本標記，有一個名爲data-info的data屬性，利用下面的方式，能夠獲取任何一個屬性，包括data-info

$('.button').click(function(e) {
   e.preventDefault();
   thisdata = $(this).attr('data-info');
   console.log(thisdata);
 });

譯文首發：http://www.ido321.com/1304.html