html5 data-*自定义属性

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

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

    <style>
        [data-age]
        {
            background-color: #0f0;
            width: 100px;
            margin: 20px;
        }
        </style>
    <div id="test" data-age="24">
        click here
    </div>

image.png

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

注意

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

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

dataset和setAttribute的使用区别

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

    <script>
        var test = document.getElementById('test');
        test.dataset.birthNumber = '11111';
        test.setAttribute('data-num', 25);
        test.setAttribute('grade', 97);
        console.log(test.dataset);
    </script>

image.png

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