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，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持此功能。

桌面

移动/平板电脑