HTML數據屬性指南

目錄

1. 簡介
2. 文法
3. 使用數據屬性進行樣式設置
4. 在JavaScript 中訪問數據屬性

簡介

HTML 元素可以具有屬性，這些屬性用於任何用途，從輔助功能信息到樣式控制。

<div aria-label="Names" role="region"></div>

不建議的做法是創建你自己的屬性，或將現有屬性重新用於不相關的功能。

<div highlight="true"></div>
<div width="large"></div>

這樣做有很多不好的原因。你的HTML 將變得無效，這可能沒有任何實際的負面影響，但會讓你失去那種溫暖模糊的有效HTML 感覺。最令人信服的原因是HTML 是一種不斷發展的語言，僅僅因為今天沒有作用的屬性和值並不意味著它們將來永遠不會起作用。

好消息是：你可以創建你自己的屬性。你只需要在它們前面加上data-*前綴，然後你就可以隨心所欲地做任何事情了！

文法

能夠創建你自己的HTML 屬性並將你自己的信息放入其中非常方便。幸運的是，你可以做到！這就是數據屬性的用途。它們是這樣的：

<div data-foo=""></div>
<div data-size="large"></div>

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

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

<div data=""></div>

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

數據屬性的不應該做什麼

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

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

這裡有更多關於隱藏內容的信息。

使用數據屬性進行樣式設置

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

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

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

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

屬性選擇器的特異性

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

內聯樣式、ID、類/屬性、標籤

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

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

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

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

不區分大小寫的屬性值

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

 /* 將匹配<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 。

可視化使用數據屬性

CSS 允許你提取數據屬性值並在需要時顯示它。

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

在JavaScript 中訪問數據屬性

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

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

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

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

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

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

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

你也可以訪問內聯數據集：

數據屬性中的JSON 數據

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

 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 使用案例

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

一個常見的例子與數據庫功能有關。假設你有一個“點贊”按鈕：

♡

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

規範

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

瀏覽器支持

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

桌面

移動/平板電腦