數(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ù)屬性進行樣式設(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ù)其值進行選擇的能力。

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

屬性選擇器的特異性

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

內(nèi)聯(lián)樣式、ID、類/屬性、標籤

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

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

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

屬性選擇器的特異性低於ID，高於元素/標籤，與類相同。

不區(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ù)並進行解析。

 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è)你有一個“點贊”按鈕：

?

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

規(guī)範

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

瀏覽器支持

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

桌面

移動/平板電腦