了解下自定义数据属性 data-*

5月 27, 2024

测试主题切换功能时，遇到了 data-theme 这个属性，问了下 gpt， 发现 data-theme 不是 CSS 标准中的预定义属性，而是一个自定义的属性。更准确地说，它是 HTML5 中的 “data-” 数据属性的一种。

HTML5 中的 “data-” 属性#

HTML5 引入了 data- 属性，允许你为元素添加自定义的非标准属性。这些自定义属性必须以 data- 开头，后面跟一个名称。例如，data-theme、data-user-id、data-state 等等。这些属性的主要目的是为元素存储与页面或应用程序相关的私有数据，而这些数据不会影响元素的展示或行为。

语法#

<div data-your-custom-attribute="value"></div>

使用示例#

1. HTML:

   <div data-theme="dark"></div>

2. CSS:

   [data-theme="dark"] {
     background-color: black;
     color: white;
   }

3. JavaScript:

   const element = document.querySelector('[data-theme]');
   console.log(element.getAttribute('data-theme')); // 将输出 "dark"
   element.setAttribute('data-theme', 'light');
   console.log(element.getAttribute('data-theme')); // 将输出 "light"
   

访问 data- 属性#

在 JavaScript 中，你还可以使用 element.dataset 属性来访问 data- 属性。dataset 返回一个 DOMStringMap 对象，允许你以对象属性的方式访问自定义数据属性。例如，访问 data-theme:

const element = document.querySelector('[data-theme]');
console.log(element.dataset.theme); // 输出: dark
element.dataset.theme = 'light';
console.log(element.dataset.theme); // 输出: light

为什么使用 data- 属性？#

• 语义化: data- 属性可以让你的 HTML 元素语义更明确，提供语义上相关的元数据。
• 无需命名空间冲突: 因为标准 HTML 的属性已经命名空间化，所以使用 data- 前缀可以避免与将来可能的标准属性名称产生冲突。
• 可被 JavaScript 方便地访问: 在 JavaScript 中可以轻松地使用 getAttribute 和 setAttribute 方法访问和修改自定义数据属性。

注意#

不要在 data attribute 里储存需要显示及访问的内容，因为一些其他的技术可能访问不到它们。另外爬虫不能将 data attribute 的值编入索引中。

总结#

data-theme 是一个自定义属性，使用 HTML5 的 data- 属性机制定义。这类属性使你可以存储和操作不影响元素展示的私有数据，非常适合用于实现如主题切换这样的功能。而它在 CSS 中的使用也很简单，通过属性选择器可以方便地应用相应的样式。