溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何理解HTML5中的標準屬性與自定義屬性，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
正如 HTML5 語法中所闡述的，元素可以包含屬性（attributes）給一個元素設置各種屬性（properties）。
有些屬性被定義為全局的，可以用在任何元素上，而其他的被定義為元素特有的。所有的屬性都有一個名稱和一個值，看起來如下面的示例所示。
下面是一個使用 HTML5 屬性的例子，演示了如何用名為 class 的屬性和值 “example” 標記一個 div 元素：
<div 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 | 數字值。 | 定義表格，圖像和表格單元的寬度。 |
自定義屬性
HTML5 還引入了一個新特性，就是可以添加自定義的數據屬性。
自定義數據屬性以 data- 開頭，基于我們的需求命名。下面是一個簡單的例子：
<div class="example" data-subject="physics" data-level="complex">
...
</div>
上面的例子中兩個叫做 data-subject 和 data-level 的自定義屬性在 HTML5 中是完全有效的。我們還可以使用 JavaScript API 或者在 CSS 中以獲取標準屬性類似的方式獲取它們的值。
在HTML元素中添加自定義屬性，通過JavaScript進行訪問，如果你之前有嘗試過，你會發現，容易忽略標記驗證，而HTML5可以為你提供在有效的網頁內創建并使用自己的元素屬性的功能。
創建HTML5文件：
如果你還沒想好要使用哪一個，可以復制下面的代碼：
XML/HTML Code復制內容到剪貼板
<!DOCTYPE html
>
<
html
>
<
head
>
<
script
>
/*functions here*/
</
script
>
</
head
>
<
body
>
</
body
>
</
html
>
在body中設置自定義元素，在head部分腳本區域利用JavaScript元素進行訪問。
創建元素：
首先，添加一些簡單的內容和自定義屬性以及ID等元素，以便我們能夠識別JavaScript示例。
XML/HTML Code復制內容到剪貼板
<
div id="product1" data-product-category="clothing"
>
Cotton Shirt
</
div
>
正如你所看到的那樣，自定義屬性的形式為：“data-*”，在“data-”部分設定名稱或者你選定的名稱。在HTML5中使用自定義屬性，這是唯一有效的方法。因此，如果你想驗證網頁是否有效可才采用這種方法。
當然，項目細節部分決定了自定義屬性對你是否有用，以及該將其如何命名。這個示例可適用于不同產品類別的零售網站。
自定義屬性允許你以一種特殊的方式利用頁面內的JavaScript代碼來設置元素，例如，動畫顯示功能。如果沒有標準的HTML元素，我們建議使用自定義屬性。
添加測試按鈕
在頁面上利用自身的JavaScript元素即可執行事件，前提是將下面的代碼添加到頁面中：
XML/HTML Code復制內容到剪貼板
<
input type="button" value="get attribute" onclick="getElementAttribute('product1')"
/>
獲取屬性：
在JavaScript中訪問屬性最常用的方法是使用“getAttributes”，這也是我們要做的第一步。在頁面的head腳本區域添加以下函數：
JavaScript Code復制內容到剪貼板
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模塊和數據集來設置屬性。
JavaScript Code復制內容到剪貼板
//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中實現自定義屬性技術上并不是很復雜，真正困難的是選擇使用的方法是否適用于你的項目；如果適用，該如何使其更有效？請記住，現在啟用數據集方法作為頁面功能還為時尚早，畢竟很多瀏覽器暫不支持此功能。
關于如何理解HTML5中的標準屬性與自定義屬性就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
