HTML5自定義數據屬性讓開發者能夠在HTML元素中存儲自定義數據。它們提供了一種向HTML元素添加額外信息的方法，這些信息可被JavaScript或CSS使用，從而增強網頁功能。本文將介紹什麼是數據屬性以及它們的用途。
關鍵要點
attr()函數向用戶顯示信息。 getAttribute()和setAttribute()方法、dataset屬性或jQuery的data()方法訪問數據屬性。 為什麼要使用自定義數據屬性？
我們經常需要存儲與不同DOM元素關聯的信息。這些信息對於讀者來說可能並不重要，但能夠輕鬆訪問它們會讓我們的開發工作變得輕鬆許多。例如，假設您在一個網頁上列出了不同的餐館。在HTML5之前，如果您想存儲餐館提供的食物類型或它們與訪問者的距離等信息，您將使用HTML的class屬性。如果您還需要存儲餐廳ID來查看用戶想要訪問的特定餐廳，該怎麼辦？以下是基於HTMLclass屬性的方法的一些問題：
class屬性並非用於存儲此類數據。其主要目的是允許開發者將樣式信息分配給一組元素。 為了解決這些問題，HTML5引入了自定義數據屬性。所有名稱以data-開頭的元素屬性都是數據屬性。您還可以使用這些數據屬性來設置元素樣式。接下來，讓我們深入了解數據屬性的基礎知識，並學習如何在CSS和JavaScript中訪問它們的值。
HTML語法
如前所述，數據屬性的名稱將始終以data-開頭。這是一個示例：
<li data-type="veg" data-distance="2miles" data-identifier="10318">Salad King</li>
您現在可以使用這些數據屬性來搜索和排序訪客的餐廳。例如，您現在可以向他們顯示一定距離內所有的素食餐廳。除了data-前綴外，有效的自定義數據屬性的名稱只能包含字母、數字、連字符（-）、點（.）、冒號（:）或下劃線（_）。它不能包含大寫字母。使用數據屬性時，您需要注意兩點。首先，存儲在這些屬性中的數據應為字符串類型。任何可以進行字符串編碼的內容也可以存儲在數據屬性中。所有類型轉換都需要在JavaScript中完成。其次，只有在沒有其他合適的HTML元素或屬性時，才應使用數據屬性。例如，將元素的類存儲在data-class屬性中是不合適的。一個元素可以擁有任意數量的數據屬性，以及您想要的任意值。
數據屬性和CSS
您可以使用屬性選擇器在CSS中使用數據屬性來設置元素樣式。您還可以使用attr()函數向用戶顯示存儲在數據屬性中的信息（在工具提示或其他方式中）。
回到我們的餐廳示例，您可以使用屬性選擇器以不同的方式設置餐廳的背景，從而向用戶提示餐廳的類型或它們與用戶的距離。這是一個示例：
li[data-type='veg'] {
background: #8BC34A;
}
li[data-type='french'] {
background: #3F51B5;
}您可以使用工具提示向用戶顯示與元素相關的其他信息。我建議您將此方法用於快速原型，而不是生產網站，原因至少是僅限CSS的工具提示並非完全可訪問。您想要顯示的信息可以存儲在data-tooltip屬性中。
<span data-tooltip="简单的解释">Word</span>
然後，您可以使用::before偽元素向用戶呈現數據。
span::before {
content: attr(data-tooltip);
//更多样式规则
}
span:hover::before {
display: inline-block;
}使用JavaScript訪問數據屬性
在JavaScript中訪問數據屬性有三種方法。
getAttribute和setAttribute您可以在JavaScript中使用getAttribute()和setAttribute()來獲取和設置不同數據屬性的值。如果給定的屬性不存在，則getAttribute方法將返回null或空字符串。以下是如何使用這些方法的示例：
let restaurant = document.getElementById("restaurantId");
let ratings = restaurant.getAttribute("data-ratings");您可以使用setAttribute方法修改現有屬性的值或添加新屬性。
restaurant.setAttribute("data-owner-name", "someName");dataset屬性訪問數據屬性的一種更簡單的方法是使用dataset屬性。此屬性返回一個DOMStringMap對象，其中包含每個自定義數據屬性的一個條目。使用dataset屬性時，您需要注意一些事項。它需要三個步驟才能將自定義數據屬性轉換為DOMStringMap鍵：
data-前綴然後可以使用存儲在對像中的駝峰式名稱作為鍵來訪問屬性，例如element.dataset.keyname。訪問屬性的另一種方法是使用方括號表示法，例如element.dataset[keyname]。考慮以下HTML：
<li data-type="veg" data-distance="2miles" data-identifier="10318">Salad King</li>
以下是一些示例：
li[data-type='veg'] {
background: #8BC34A;
}
li[data-type='french'] {
background: #3F51B5;
}此方法現在已在所有主要瀏覽器中受支持，您應該優先使用它來訪問自定義數據屬性。
您還可以使用jQuery的data()方法訪問元素的數據屬性。在jQuery 1.6版本之前，您必須使用以下代碼訪問數據屬性：
<span data-tooltip="简单的解释">Word</span>
從1.6版本開始，jQuery開始使用數據屬性的駝峰式版本。現在，您可以使用以下代碼執行相同的操作：
span::before {
content: attr(data-tooltip);
//更多样式规则
}
span:hover::before {
display: inline-block;
}您應該知道，jQuery還會嘗試在內部將從數據屬性獲得的字符串轉換為合適的類型，例如數字、布爾值、對象、數組和null。
let restaurant = document.getElementById("restaurantId");
let ratings = restaurant.getAttribute("data-ratings");如果您希望jQuery將從數據屬性獲得的值作為字符串獲取，而無需嘗試將其轉換為其他類型，則應使用jQuery的attr()方法。 jQuery僅在第一次訪問數據屬性時才檢索其值。然後不再訪問或更改數據屬性。您對這些屬性所做的所有更改都在內部進行，並且只能在jQuery中訪問。假設您正在操作以下列表項的數據屬性：
restaurant.setAttribute("data-owner-name", "someName");您可以使用以下代碼更改其data-distance屬性的值：
<li data-type="veg" data-distance="2miles" data-identifier="10318" data-owner-name="someName">Salad King</li>
如您所見，使用原生JavaScript（非jQuery）訪問data-distance屬性的值仍然會提供舊的結果。
結論
在本教程中，我已經介紹了關於HTML5數據屬性的所有重要內容。除了使用屬性選擇器創建工具提示和設置元素樣式外，您還可以使用數據屬性來存儲和向用戶顯示其他數據，例如有關未讀消息的通知等等。
(此處應添加常見問題解答部分，內容與輸入文本中的FAQ部分一致，但語言表達可以更精煉一些。為了避免重複，我省略了這部分內容。)
以上是如何使用HTML5自定義數據屬性以及為什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
