自定義屬性
HTML5 還引入了一個新特性，就是可以添加自定義的數(shù)據(jù)屬性。

自定義數(shù)據(jù)屬性以 data- 開頭，基于我們的需求命名。下面是一個簡單的例子：

<div class="example" data-subject="physics" data-level="complex">
...
</div>
上面的例子中兩個叫做 data-subject 和 data-level 的自定義屬性在 HTML5 中是完全有效的。我們還可以使用 JavaScript API 或者在 CSS 中以獲取標準屬性類似的方式獲取它們的值。

在HTML元素中添加自定義屬性，通過JavaScript進行訪問，如果你之前有嘗試過，你會發(fā)現(xiàn)，容易忽略標記驗證，而HTML5可以為你提供在有效的網(wǎng)頁內(nèi)創(chuàng)建并使用自己的元素屬性的功能。

創(chuàng)建HTML5文件：

如果你還沒想好要使用哪一個，可以復(fù)制下面的代碼：

 
在body中設(shè)置自定義元素，在head部分腳本區(qū)域利用JavaScript元素進行訪問。

創(chuàng)建元素：

首先，添加一些簡單的內(nèi)容和自定義屬性以及ID等元素，以便我們能夠識別JavaScript示例。

 
正如你所看到的那樣，自定義屬性的形式為：“data-*”，在“data-”部分設(shè)定名稱或者你選定的名稱。在HTML5中使用自定義屬性，這是唯一有效的方法。因此，如果你想驗證網(wǎng)頁是否有效可才采用這種方法。

當然，項目細節(jié)部分決定了自定義屬性對你是否有用，以及該將其如何命名。這個示例可適用于不同產(chǎn)品類別的零售網(wǎng)站。

自定義屬性允許你以一種特殊的方式利用頁面內(nèi)的JavaScript代碼來設(shè)置元素，例如，動畫顯示功能。如果沒有標準的HTML元素，我們建議使用自定義屬性。

添加測試按鈕

在頁面上利用自身的JavaScript元素即可執(zhí)行事件，前提是將下面的代碼添加到頁面中：

 
獲取屬性：

在JavaScript中訪問屬性最常用的方法是使用“getAttributes”，這也是我們要做的第一步。在頁面的head腳本區(qū)域添加以下函數(shù)：

這里，我們?yōu)槭纠黾恿薬lert 值，當然你也可以根據(jù)自身需求在腳本中添加。

獲取數(shù)據(jù)：

你可以使用元素數(shù)據(jù)集來替代DOM “getAttributes”，這或許更有效，尤其是在某種情況下，代碼通過多種屬性進行迭代，然而，瀏覽器對數(shù)據(jù)集的支持依然非常低，所以牢記這一點，此代碼與//后面的方法一樣可執(zhí)行相同的進程。

//var theAttribute = theElement.getAttribute('data-product-category'); 
var theAttribute = theElement.dataset.productCategory;
從屬性名稱開始在數(shù)據(jù)集中刪除“data-”，它仍然包含在HTML中。

請注意，如果你的自定義屬性名稱中有一個連字符，當通過數(shù)據(jù)訪問時這會呈現(xiàn)出camel-case形式，即（“data-product-category” 變成“productCategory”)。

其他模塊、函數(shù)

我們已經(jīng)獲取該屬性，腳本仍然可以設(shè)置和刪除。下面的代碼演示了如何使用標準的JavaScript模塊和數(shù)據(jù)集來設(shè)置屬性。

在HTML5中實現(xiàn)自定義屬性技術(shù)上并不是很復(fù)雜，真正困難的是選擇使用的方法是否適用于你的項目；如果適用，該如何使其更有效？請記住，現(xiàn)在啟用數(shù)據(jù)集方法作為頁面功能還為時尚早，畢竟很多瀏覽器暫不支持此功能。