介绍

HTML5 是具有扩展性的设计，它初衷是数据应与特定的元素相关联，但不需要任何定义。

data-* 全局属性是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本在 HTML 与 DOM 表现之间进行专有数据的交换。通过添加 data-* 属性，即使是普通的 HTML 元素也能变成相当复杂且强大的编程对象，而不需要使用 DOM 标准额外属性或是 setUserData 之类的技巧。

其中 * 可以被遵循 xml 规则的任何名称替换，并具有一些限制：

  • 不能以 xml 开头（不区分大小写）；
  • 不能包含冒号 :；
  • 不能包含大写字母。

使用

  1. CSS 访问：因为 data-* 设定为 HTML 属性，所以他们同样能被 CSS 访问。比如你可以通过 CSS content 属性，使用 attr 函数来显示 data-* 的内容：

    1
    2
    3
    4
    <ul>
      <li data-id="Alex Trevelyan">006: Agent turned terrorist leader; James' nemesis in "Goldeneye".</li>
      <li data-id="James Bond">007: The main man; shaken but not stirred.</li>
    </ul>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    li:after {
      content: 'Data ID: 'attr(data-id);
      position: absolute;
      top: -22px;
      left: 10px;
      background: black;
      color: white;
      padding: 2px;
      border: 1px solid #eee;
      opacity: 0;
      transition: 0.5s opacity;
    }

    li:hover:after {
      opacity: 1;
    }

  2. JavaScript 访问：在外部使用 JavaScript 去访问这些属性的值同样非常简单。你可以使用 Element.getAttribute() 配合它们完整的 HTML 名称去读取它们。但标准定义了一个更简单的方法：通过 HTMLElement.dataset.propertyName (或者 HTMLElement.dataset["propertyName"]) 来获取属性名中 data- 之后的部分，要注意的是破折号连接的名称需要改写为骆驼拼写法，例如 data-index-number 转换为 indexNumber。

    1
    2
    3
    4
    5
    6
    7
    <article
      id="electriccars"
      data-columns="3"
      data-index-number="12314"
      data-parent="cars">
    ...
    </article>
    1
    2
    3
    4
    5
    const article = document.querySelector('#electriccars');

    article.dataset.columns // "3"
    article.dataset.indexNumber // "12314"
    article.dataset.parent // "cars"

示例