HTML5自定义属性中的使用数据属性(using data attributes)

HTML5允许用户使用自定义属性来保存并使用这些数据。自定义属性出现在元素标签内部，这些属性与特定的元素项关联，允许我们在html元素中保存信息。

使用数据属性是以data-为前缀的。后面内容也可以跟连字符-。例如data-first-name，data-index

保存信息多种多样。例如为了计数li的顺序使用data-index，为了指定父子关系使用data-parent。

 

 这个是bilibili的一部分网页代码，可以看到使用数据属性的大量使用。

读写使用数据类型

由于使用数据类型是自定义属性。我们不能通过Element.属性名获取它们，也不能通过Element.属性名=“属性值”的方式来修改他们。

针对于自定义属性，我们可以通过getAttribute()方法来获取属性值，通过setAttribute方法来修改属性值。前者参数是属性名的字符串，后者参数是属性名的字符串和修改后的属性值的字符串。更多可见本人另一篇博文

使用数据属性结合CSS

使用数据属性作为html元素的属性，可以被css属性选择器选中。通过这一点，我们操作具有同一类使用数据属性的元素可以使用属性选择器。eg div[data-index]{color:red;}为包含属性data-dndex的元素设置红色。

我们可以使用attr()函数来使用自定义属性的数据。eg:

div::after{
      content: attr(data-index);
    }

在pink老师的视频中介绍的自定义属性在MDN官方文档中被称作数据属性。本文也是大量参考MDN官方文档，MDN官方文档可见。