HTML Academy · 课时

自定义数据属性：data-*

Q: 「自定义数据属性：data-*」这节课中我会学到什么？

使用 data-* 属性将自定义数据直接存储在元素上。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 data-* 属性将自定义数据直接存储在元素上。

自定义数据属性：data-* 是 CoddyKit 上的免费 HTML Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

什么是 data-* 属性？

自定义 data 属性可以让您直接在 HTML 元素上存储额外信息：

<button data-user-id="42" data-action="delete">Delete User</button>
<li data-category="frontend" data-level="beginner">HTML</li>

<!-- Format: data-[name]="value" -->
<!-- Any alphanumeric name after data- is valid -->
<!-- Values are always strings -->

data-* 存在的原因

在有 data-* 之前，开发者会将额外数据存储在：

隐藏输入框中（杂乱）
CSS 类名中（脆弱）
rel 或 title 等非标准属性中（无效的 HTML）

HTML5 将 data-* 正式确立为嵌入自定义数据的官方方式，且不会影响语义或呈现。

命名规则

data-* 属性的命名规则：

必须以 data- 开头
名称可以包含小写字母、数字、连字符、下划线和句点
名称中不能有大写字母（HTML 规范会将其转换为小写）
名称不能以 xml 开头

<div data-user-id="1">OK</div>
<div data-product-category="tools">OK</div>
<!-- <div data-XML-thing="1">BAD: starts with xml -->
<!-- <div data-MyProp="1">BAD: uppercase in name -->

在 JavaScript 中读取 data-*

通过 dataset 属性访问自定义数据：

<button id="btn"
  data-user-id="42"
  data-action="delete"
  data-confirm-message="Are you sure?"
>
  Delete
</button>

<script>
const btn = document.getElementById('btn');
console.log(btn.dataset.userId);          // '42'
console.log(btn.dataset.action);          // 'delete'
console.log(btn.dataset.confirmMessage);  // 'Are you sure?'
// Note: data-user-id → dataset.userId (camelCase conversion)
</script>

使用 dataset 写入 data-*

通过 dataset 设置和移除 data 属性：

const card = document.querySelector('.card');

// Set:
card.dataset.status = 'active';
// Now: <div class="card" data-status="active">

// Delete:
delete card.dataset.status;
// Now: data-status is removed

// Alternatively with setAttribute:
card.setAttribute('data-status', 'inactive');
card.removeAttribute('data-status');

从连字符到 camelCase 的转换

dataset API 会将使用连字符分隔的名称转换为 camelCase：

<!-- HTML attribute         JavaScript dataset property -->
data-user-id           →   dataset.userId
data-product-category  →   dataset.productCategory
data-max-retries       →   dataset.maxRetries
data-is-active         →   dataset.isActive

CSS 属性选择器

在 CSS 选择器中使用 data 属性：

[data-status="active"] {
  color: green;
}

[data-status="inactive"] {
  color: gray;
  text-decoration: line-through;
}

/* Present but any value: */
[data-featured] {
  border: 2px solid gold;
}

工具提示模式

使用 data 属性构建纯 CSS 工具提示：

<span data-tooltip="This is a tooltip">Hover me</span>

/* CSS: */
/*
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);  /* attr() reads the attribute value */
  position: absolute;
  background: #333;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
[data-tooltip]:hover::after { opacity: 1; }
*/

状态跟踪模式

使用 data 属性跟踪组件状态：

<button data-state="off" id="toggle">Toggle</button>

<script>
document.getElementById('toggle').addEventListener('click', function() {
  const state = this.dataset.state;
  this.dataset.state = state === 'off' ? 'on' : 'off';
  this.textContent = this.dataset.state === 'on' ? 'Active' : 'Toggle';
});
</script>

/* CSS: */
/* [data-state="on"] { background: green; color: white; } */

data-* 与 JavaScript 变量的对比

以下是使用 data-* 与在 JavaScript 中存储数据的适用场景：

对于直接对应某个 DOM 元素且可能被 CSS 读取的值，请使用 data-*
对于不依附于特定元素的复杂数据结构，请使用 JavaScript 变量或对象
不要在 data-* 中存储大量或敏感的数据——它们可以在 DevTools 中看到

data-* 不用于呈现

请避免以下常见错误：

<!-- BAD: storing presentation data in data-* -->
<div data-color="red" data-font-size="18">Text</div>
<!-- Use CSS classes instead: -->
<div class="text-danger text-lg">Text</div>

<!-- BAD: storing sensitive data -->
<div data-api-key="sk-123...">Content</div>
<!-- NEVER store secrets in HTML attributes -->

快速检查

dataset API 如何访问 data-product-id 属性？

回顾：data-* 属性

自定义 data 属性要点：

data-name="value" — 在元素上存储自定义元数据
通过 element.dataset.camelCase 访问
在 dataset API 中，连字符会转换为 camelCase
通过 [data-name="value"] 选择器在 CSS 中使用
绝不要在 data 属性中存储敏感数据（密钥、密码）

常见问题解答

「自定义数据属性：data-*」课时是免费的吗？

是的 — 「自定义数据属性：data-*」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「自定义数据属性：data-*」这节课中我会学到什么？

使用 data-* 属性将自定义数据直接存储在元素上。你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「自定义数据属性：data-*」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy