武林網(www.49028c.com)文章簡介：在HTML5中實現自定義屬性技術上并不是很復雜，真正困難的是選擇使用的方法是否適用于你的項目；如果適用，該如何使其更有效？請記住，現在啟用數據集方法作為頁面功能還為時尚早，畢竟很多瀏覽器暫不支持此功能。

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" onclick="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;

 從屬性名稱開始在數據集中刪除“data-”，它仍然包含在HTML中。
請注意，如果你的自定義屬性名稱中有一個連字符，當通過數據訪問時這會呈現出camel-case形式，即（“data-product-category” 變成“productCategory”)。

其他模塊、函數
我們已經獲取該屬性，腳本仍然可以設置和刪除。下面的代碼演示了如何使用標準的JavaScript模塊和數據集來設置屬性。
你也可以使用DOM方法或者數據集來刪除某個屬性：

//DOM method 
 
theElement.removeAttribute('data-product-category');
//dataset version 
 
theElement.dataset.productCategory = null;

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