數(shù)據(jù)屬性通常被稱為 data-* 屬性，因為它們總是以這種格式。單詞 data，然后是一個短劃線 -，然后是你能想到的其他文本。

你可以單獨使用 data 屬性嗎？

<div data=""></div>

這可能不會造成任何傷害，但你將無法獲得我們將在本指南后面介紹的 JavaScript API。你實際上是在為自己創(chuàng)建屬性，正如我在引言中提到的那樣，這是不鼓勵的。

數(shù)據(jù)屬性的不應(yīng)該做什么

存儲應(yīng)該可以訪問的內(nèi)容。如果內(nèi)容應(yīng)該在頁面上看到或閱讀，不要只將它們放在數(shù)據(jù)屬性中，還要確保內(nèi)容在 HTML 內(nèi)容中的某個地方。

<div data-name="Chris Coyier"></div>
<div>
  Chris Coyier
</div>

這里有更多關(guān)于隱藏內(nèi)容的信息。

使用數(shù)據(jù)屬性進(jìn)行樣式設(shè)置

CSS 可以根據(jù)屬性及其值選擇 HTML 元素。

/* 選擇具有此數(shù)據(jù)屬性和值的任何元素 */
[data-size="large"] {
  padding: 2rem;
  font-size: 125%;
}
/* 你可以將其限定為元素或類或任何其他內(nèi)容 */
button[data-type="download"] { }
.card[data-pad="extra"] { }

這可能很有吸引力。HTML/CSS 中主要的樣式掛鉤是類，雖然類很棒（它們具有中等特異性和通過 classList 的不錯的 JavaScript 方法），但元素要么具有它，要么不具有它（基本上是開啟或關(guān)閉）。使用 data-* 屬性，你可以獲得這種開啟/關(guān)閉功能，以及在相同特異性級別上根據(jù)其值進(jìn)行選擇的能力。

/* 如果屬性存在，則選擇 */
[data-size] { }
/* 選擇屬性是否具有特定值 */
[data-state="open"],
[aria-expanded="true"] { }
/* “以…開頭”選擇器，這意味著這將匹配“3”或任何以 3 開頭的字符，例如“3.14” */
[data-version^="3"] { }
/* “包含”表示如果值在任何地方包含該字符串 */
[data-company*="google"] { }

屬性選擇器的特異性

它與類完全相同。我們通常將特異性視為一個四部分值：

內(nèi)聯(lián)樣式、ID、類/屬性、標(biāo)簽

因此，單獨的屬性選擇器為0, 0, 1, 0。像這樣的選擇器：

div.card[data-foo="bar"] { }

將是0, 0, 2, 1。2 是因為有一個類（.card）和一個屬性（[data-foo="bar"]），而 1 是因為有一個標(biāo)簽（div）。

屬性選擇器的特異性低于 ID，高于元素/標(biāo)簽，與類相同。

不區(qū)分大小寫的屬性值

如果你需要糾正數(shù)據(jù)屬性中可能存在的大小寫不一致，屬性選擇器為此提供了一個不區(qū)分大小寫的變體。

/* 將匹配
<div data-state="open"></div>
<div data-state="Open"></div>
<div data-state="OPEN"></div>
<div data-state="oPeN"></div>
*/
[data-state="open" i] { }

它是在方括號選擇器中的小寫字母 i。

可視化使用數(shù)據(jù)屬性

CSS 允許你提取數(shù)據(jù)屬性值并在需要時顯示它。

/* <div data-emoji="?"> */
[data-emoji]::before {
  content: attr(data-emoji); /* 返回 '?' */
  margin-right: 5px;
}
<h4>樣式使用的示例</h4>
<p>你可以使用數(shù)據(jù)屬性來指定網(wǎng)格容器所需的列數(shù)。</p>
<pre class="brush:php;toolbar:false"><div data-columns="2"></div>
<div data-columns="3"></div>
<div data-columns="4"></div>

在 JavaScript 中訪問數(shù)據(jù)屬性

與任何其他屬性一樣，你可以使用通用方法 getAttribute 來訪問該值。

let value = el.getAttribute("data-state");
// 你也可以設(shè)置值。
// 返回 data-state="collapsed"
el.setAttribute("data-state", "collapsed");

但是數(shù)據(jù)屬性也有自己的特殊 API。假設(shè)你有一個具有多個數(shù)據(jù)屬性的元素（這完全沒問題）：

如果你的元素有引用，你可以像這樣設(shè)置和獲取屬性：

// 獲取
span.dataset.info; // 123
span.dataset.index; // 2
// 設(shè)置
span.dataset.prefix = "Mr. ";
span.dataset.emojiIcon = "?";

請注意最后一行中的駝峰式命名法。它會自動將 HTML 中的 kebab-style 屬性（如 data-this-little-piggy）轉(zhuǎn)換為 JavaScript 中的駝峰式命名法（如 dataThisLittlePiggy）。

這個 API arguably 不像 classList 那樣好，classList 有清晰的添加、刪除、切換和替換方法，但它總比沒有好。

你也可以訪問內(nèi)聯(lián)數(shù)據(jù)集：

數(shù)據(jù)屬性中的 JSON 數(shù)據(jù)

為什么不呢？它只是一個字符串，可以將其格式化為有效的 JSON（注意引號等）。你可以根據(jù)需要提取該數(shù)據(jù)并進(jìn)行解析。

const el = document.querySelector("li");
let json = el.dataset.person;
let data = JSON.parse(json);
console.log(data.name); // Chris Coyier
console.log(data.job); // Web Person

JavaScript 使用案例

這個概念是你可以使用數(shù)據(jù)屬性將信息放入 HTML 中，JavaScript 可能需要訪問這些信息才能執(zhí)行某些操作。

一個常見的例子與數(shù)據(jù)庫功能有關(guān)。假設(shè)你有一個“點贊”按鈕：

?

該按鈕可以對其進(jìn)行點擊處理程序，該處理程序在點擊時執(zhí)行對服務(wù)器的 Ajax 請求以遞增數(shù)據(jù)庫中點贊的數(shù)量。它知道要更新哪個記錄，因為它從數(shù)據(jù)屬性中獲取它。

規(guī)范

• 選擇器級別 4（工作草案）
• 選擇器級別 3（推薦）
• 選擇器級別 2，修訂版 1（初始定義）

瀏覽器支持

此瀏覽器支持?jǐn)?shù)據(jù)來自 Caniuse，其中包含更多詳細(xì)信息。數(shù)字表示瀏覽器在該版本及更高版本中支持此功能。

桌面

移動/平板電腦