HTML中的data屬性是用來(lái)在HTML元素中存儲(chǔ)數(shù)據(jù)的一個(gè)自定義屬性。在HTML5中，data屬性被正式引入，可以給HTML元素添加自定義的數(shù)據(jù)。通常情況下，data屬性值是一個(gè)字符串，但是您可以自由地將其設(shè)置為任何您想要存儲(chǔ)的值。

例如：
<div data-id="123" data-name="John" data-role="admin"></div>

在上面的例子中，我們將三個(gè)值分別存儲(chǔ)在data-id、data-name和data-role屬性中。您可以使用JavaScript從HTML元素中讀取這些自定義屬性值，而不影響HTML頁(yè)面上的任何內(nèi)容。例如，您可以使用以下方法獲取元素的data-id值：

var id = document.querySelector('div').dataset.id;
console.log(id); // 輸出 123

您可以使用dataset屬性訪問(wèn)HTML元素的data屬性。dataset屬性是一個(gè)DOMStringMap對(duì)象，用于在HTML元素上設(shè)置或獲取自定義數(shù)據(jù)。在調(diào)用dataset方法之前，將data-前綴從屬性名稱中刪除。例如，在上面的示例中，您可以使用以下方法訪問(wèn)div元素上的data-name值：

var name = document.querySelector('div').dataset.name;
console.log(name); // 輸出 John

在設(shè)置data屬性值時(shí)，請(qǐng)務(wù)必記住在屬性名稱前加上data-前綴，例如：

<div data-id="123" data-name="John" data-role="admin"></div>

在JavaScript中，您可以使用dataset屬性向HTML元素設(shè)置data屬性值。例如，要將新值'Mary'設(shè)置為div元素上的data-name值，您可以使用以下代碼：

document.querySelector('div').dataset.name = 'Mary';

data屬性值對(duì)于在編寫JavaScript代碼時(shí)存儲(chǔ)數(shù)據(jù)非常有用。當(dāng)您需要向HTML元素添加自定義數(shù)據(jù)時(shí)，data屬性是一種快速且簡(jiǎn)單的方法。無(wú)論是單個(gè)數(shù)據(jù)還是一組數(shù)據(jù)，data屬性都可以輕松地存儲(chǔ)和讀取。