HTML5開發正在如火如荼的進行中，在HTML5中使用自定義屬性正逐漸受到開發者們的青睞；此外，它還在Web開發語義中發揮了重要作用。本文我們將探討通過實踐案例來創建和訪問HTML5自定義數據屬性，包括JavaScript函數
再使用HTML5前，首先在HTML元素中添加自定義屬性，通過JavaScript進行訪問，如果你之前有嘗試過，你會發現，容易忽略標記驗證，而HTML5可以爲你提供在有效的網頁內創建並使用自己的元素屬性的功能。
創建HTML5文件：
如果你還沒想好要使用哪一個，可以複製下面的代碼：
- <!DOCTYPE html>
- <html>
- <head>
- <script>
- /*functions here*/
- </script>
- </head>
- <body>
- </body>
- </html>
在body中設置自定義元素，在head部分腳本區域利用JavaScript元素進行訪問。
創建元素：
首先，添加一些簡單的內容和自定義屬性以及ID等元素，以便我們能夠識別JavaScript示例。
- <div id="product1" data-product-category="clothing">
- Cotton Shirt
- </div>
正如你所看到的那樣，自定義屬性的形式爲：“data-*”，在“data-”部分設定名稱或者你選定的名稱。在HTML5中使用自定義屬性，這是唯一有效的方法。因此，如果你想驗證網頁是否有效可才採用這種方法。
當然，項目細節部分決定了自定義屬性對你是否有用，以及該將其如何命名。這個示例可適用於不同產品類別的零售網站。
自定義屬性允許你以一種特殊的方式利用頁面內的JavaScript代碼來設置元素，例如，動畫顯示功能。如果沒有標準的HTML元素，我們建議使用自定義屬性。
添加測試按鈕
在頁面上利用自身的JavaScript元素即可執行事件，前提是將下面的代碼添加到頁面中：
- <input type="button" value="get attribute" οnclick="getElementAttribute('product1')"/>
獲取屬性：
在JavaScript中訪問屬性最常用的方法是使用“getAttributes”，這也是我們要做的第一步。在頁面的head腳本區域添加以下函數：
- function getElementAttribute(elemID) {
- var theElement = document.getElementById(elemID);
- var theAttribute = theElement.getAttribute('data-product-category');
- alert(theAttribute);
- }
這裏，我們爲示例增加了alert 值，當然你也可以根據自身需求在腳本中添加。
獲取數據：
你可以使用元素數據集來替代DOM “getAttributes”，這或許更有效，尤其是在某種情況下，代碼通過多種屬性進行迭代，然而，瀏覽器對數據集的支持依然非常低，所以牢記這一點，此代碼與//後面的方法一樣可執行相同的進程。
- //var theAttribute = theElement.getAttribute('data-product-category');
- var theAttribute = theElement.dataset.productCategory; //這兒IE9之前的不支持,ff支持
從屬性名稱開始在數據集中刪除“data-”，它仍然包含在HTML中。
請注意，如果你的自定義屬性名稱中有一個連字符，當通過數據訪問時這會呈現出camel-case形式，即（“data-product-category” 變成“productCategory”)。
其他模塊、函數
我們已經獲取該屬性，腳本仍然可以設置和刪除。下面的代碼演示瞭如何使用標準的JavaScript模塊和數據集來設置屬性。
- //DOM method
- theElement.setAttribute('data-product-category', 'sale');
- //dataset version
- theElement.dataset.productCategory = "sale";
你也可以使用DOM方法或者數據集來刪除某個屬性：
- //DOM method
- theElement.removeAttribute('data-product-category');
- //dataset version
- theElement.dataset.productCategory = null;
結束語：
在HTML5中實現自定義屬性技術上並不是很複雜，真正困難的是選擇使用的方法是否適用於你的項目；如果適用，該如何使其更有效？請記住，現在啓用數據集方法作爲頁面功能還爲時尚早，畢竟很多瀏覽器暫不支持此功能。
