全面解析HTML5中的標準屬性與自訂屬性_html5教學技巧

如 HTML5 語法所闡述的，元素可以包含屬性（attributes）為一個元素設定各種屬性（properties）。

有些屬性被定義為全域的，可以用在任何元素上，而其他的則定義為元素特有的。所有的屬性都有一個名稱和一個值，看起來如下面的範例所示。

以下是一個使用 HTML5 屬性的例子，示範如何用名為 class 的屬性和值 “example” 標記一個 div 元素：

...

屬性只能在起始標籤中指定，絕對不能用在結束標籤中。

HTML5 屬性不區分大小寫，可以全部大寫或混合使用，儘管最常見的約定是始終使用小寫。

標準屬性
下面列出的屬性幾乎所有的 HTML5 標籤都支援。

属性	选项	功能
accesskey	用户自定义	定义访问元素的键盘快捷键。
align	right, left, center	水平对齐标签。
background	URL	在元素后面设置一个背景图像。
bgcolor	数值，十六进制值，RGB值	在元素后面设置一个背景颜色。
class	用户定义。	分类一个元素，便于使用级联样式表。
contenteditable	true, false	定义用户是否可以编辑元素的内容。
contextmenu	Menu id	为元素定义上下文菜单。
data-XXXX	用户定义。	自定义属性。 HTML 文档的作者可以定义自己的属性。 自定义属性必须以 "data-" 开头。
draggable	true,false, auto	定义用户是否可以拖动元素。
height	数字值	定义表格，图像或表格单元的高度。
hidden	hidden	定义元素是否应该可见。
id	用户定义。	命名元素，便于使用级联样式表。
item	元素列表。	用于组合元素。
itemprop	条目列表。	用于组合条目。
spellcheck	true, false	定义元素是否必须有拼写或错误检查。
style	CSS 样式表。	给元素定义内联样式。
subject	用户定义 id。	定义元素关联的条目。
tabindex	Tab number	定于元素的 tab 键顺序。
title	用户定义。	元素的“弹出”标题。
valign	top, middle, bottom	HTML 元素内标签的垂直对齐方式。
width	数字值。	定义表格，图像和表格单元的宽度。

屬性

選項

功能

accesskey

用戶自訂

定義存取元素的鍵盤快速鍵。

align

right, left, center

水平對齊標籤。

background

URL

在元素後面設定一個背景圖像。

bgcolor

數值，十六進位值，RGB值

在元素後面設定一個背景顏色。

class

使用者定義。

分類一個元素，方便使用級聯樣式表。

contenteditable

true, false

定義使用者是否可以編輯元素的內容。

contextmenu

Menu id

為元素定義上下文選單。

data-XXXX

使用者定義。

自訂屬性。 HTML 文件的作者可以定義自己的屬性。 自訂屬性必須以 "data-" 開頭。

draggable

true,false, auto

定義使用者是否可以拖曳元素。

height

數字值

定義表格，影像或表格單元的高度。

hidden

hidden

定義元素是否應該可見。

id

使用者定義。

命名元素，方便使用級聯樣式表。

item

元素列表。

用於組合元素。

itemprop

條目清單。

用於組合條目。

spellcheck

true, false

定義元素是否必須有拼字或錯誤檢查。

style

CSS 樣式表。

為元素定義內聯樣式。

subject

使用者定義 id。

定義元素關聯的條目。

tabindex

Tab number

定於元素的 tab 鍵順序。

title

使用者定義。

元素的「彈出」標題。

valign

top, middle, bottom

HTML 元素內標籤的垂直對齊方式。

width

數字值。

定義表格，影像和表格單元的寬度。

自訂屬性
HTML5 也引進了一個新特性，就是可以加入自訂的資料屬性。

自訂資料屬性以 data- 開頭，基於我們的需求命名。下面是一個簡單的例子：

...

上面的範例中兩個叫做data- subject 和data-level 的自訂屬性在HTML5 中是完全有效的。我們也可以使用 JavaScript API 或在 CSS 中以取得標準屬性類似的方式來取得它們的值。

在HTML元素中添加自訂屬性，透過JavaScript進行訪問，如果你之前有嘗試過，你會發現，容易忽略標記驗證，而HTML5可以為你提供在有效的網頁內創建並使用自己的元素屬性的功能。

建立HTML5檔案：

如果你還沒想好要用哪一個，可以複製下面的程式碼：

XML/HTML Code複製內容到剪貼簿

1. html   
2. >  
3.     
4.   
5. html  
6. >  
7.     
8.   
9. head  
10. >  
11.     
12.   
13. script  
14. >  
15.     
16. /*functions here*/     
17.   
18. script  
19. >  
20.     
21.   
22. head  
23. >  
24.     
25.   
26. body  
27. >  
28.     
29.   
30. body  
31. >  
32.     
33.   
34. html  
35. >  

 
在body中設定自訂元素，在head部分腳本區域利用JavaScript元素進行存取。

建立元素：

首先，加入一些簡單的內容和自訂屬性以及ID等元素，以便我們能夠識別JavaScript範例。

XML/HTML Code複製內容到剪貼簿

1.   
2. div id="product1"= >data-product-category="clothing"  
3. >  
4.     
5. Cotton Shirt     
6.   
7. div  
8. >  

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

當然，專案細節部分決定了自訂屬性是否對您有用，以及如何命名。這個範例可適用於不同產品類別的零售網站。

自訂屬性可讓你以特殊的方式利用頁面內的JavaScript程式碼來設定元素，例如，動畫顯示功能。如果沒有標準的HTML元素，我們建議使用自訂屬性。

新增測試按鈕

在頁面上利用自身的JavaScript元素即可執行事件，前提是將下面的程式碼加入頁面中：

XML/HTML Code複製內容到剪貼簿

1.   
2. input type="button"="button"value="get attribute" onclick ('product1')"  
3. />  

 

取得屬性：

在JavaScript中存取屬性最常用的方法是使用“getAttributes”，這也是我們要做的第一步。在頁面的head腳本區域新增以下函數：

JavaScript Code

複製內容到剪貼簿

1. function getElementAttribute(elemID) {     
2. var theElement = document.getElementById(elemID);     
3. var theAttribute = theElement.getAttribute('data-product-category'🠎); 🎜> alert(theAttribute);     
}   

5. 這裡，我們為範例增加了alert 值，當然你也可以根據自身需求在腳本中加入。

   取得數據：

   你可以使用元素資料集來取代DOM “getAttributes”，這或許更有效，尤其是在某種情況下，程式碼透過多種屬性進行迭代，然而，瀏覽器對資料集的支援依然非常低，所以牢記這一點，此程式碼與//後面的方法一樣可執行相同的進程。

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

   請注意，如果你的自訂屬性名稱中有一個連字符，當透過資料存取時這會呈現出camel-case形式，即（“data-product-category” 變成“productCategory”)。

   其他模組、函數

   我們已經取得該屬性，腳本仍然可以設定和刪除。下面的程式碼示範如何使用標準的JavaScript模組和資料集來設定屬性。

   JavaScript Code複製內容到剪貼簿

   1. //DOM method       
   2.     
   3. theElement.setAttribute('data-product-category', 'sale' 
   4. //dataset version       
       
   theElement.dataset.productCategory = 
   6. "sale";     
   你也可以使用DOM方法或資料集刪除某個屬性：   
     
   9. //DOM method     
   theElement.removeAttribute(
   10. 'data-product-category');    
   11. //dataset version     
   theElement.dataset.productCategory = 
   12. null;   

   在HTML5中實作自訂屬性技術上並不是很複雜，真正困難的是選擇使用的方法是否適用於你的專案；如果適用，該如何使其更有效？請記住，現在啟用資料集方法作為頁面功能還為時過早，畢竟許多瀏覽器暫時不支援此功能。