HTML 5 的data- 自定义属性

  HTML 5增加了一项新功能是自定义数据属性,也就是 data-*自定义属性。在HTML5中我们可以使用以data-为前缀来设置我们需要的自定义属性,来进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。

  此方法能在所有的现代浏览器中正常工作,但它不是HTML 5 的自定义 data-* 属性被使用目的,不然和我们以前使用的自定义属性就没有什么区别了,例如:

  这种“原始”的自定义属性和上面data-*自定义属性没什么区别,知识属性名不一样。

  data-*主要是对自定义属性做了标准化;循环取值的时候dataset属性比较方便,还有不是问题的问题就是自定义的attribute也不符合html规范(欢迎留言补充)。

  使用这种方法时,不是使用完整的属性名,如data-uid来存取数据,应该去掉data-前缀。

  还有一点特别注意的是:data-属性名如果包含了连字符,例如:data-date-of-birth,连字符将被去掉,并转换为驼峰式的命名,前面的属性名转换后应该是:dateOfBirth。

  在实际开发时,您可能会发现它很有用,你可以根据自定义的data-属性选择相关的元素。例如使用querySelectorAll选择元素:

  同样的我们也可以通过data-属性值对相应的元素设置CSS样式,例如下面这个例子:

相关阅读