html5 data-*自定义属性

data-*自定义属性的使用方式

1.可以对含有该属性的标签进行样式的赋值，

    
    

        click here
    

image.png

2.可以获取该属性的值，为自定义属性，里面包含其私有的属性值，例子见下面与setAttribute的区别。

注意

1. 我们在添加或读取属性的时候需要去掉前缀data-*，像上面的例子我们没有使用test.dataset.data-my = 'Byron';的形式。

2. 如果属性名称中还包含连字符-，需要转成驼峰命名方式，但如果在CSS中使用选择器，我们需要使用连字符格式

dataset和setAttribute的使用区别

dataset和setAttribute一样都是可以自定义属性，但dataset是偏向自定义的数据集的,可以类似于地址信息这些，就是说dataset是setAttribute一个子集，是更为确切一部分信息的集合。

image.png

从结果图可以看出，grade并没有在dataset属性集里。