设置属性值
元素的“data-*”自定义属性有两种设置方式，下面我们分别进行介绍。
1. 在HTML中设置自定义属性
在div元素上设置data-index属性，示例代码如下。
<div data-index="2"></div>上述代码中，data-index就是一种自定义属性，“data-”是自定义属性的前缀，index是开发者自定义的属性名。
2. 在JavaScript中设置自定义属性
在JavaScript代码中，可以通过setAttribute('属性', 值)或者“元素对象.dataset.属性名='值'”两种方式设置自定义属性。需要注意的是，通过后者的方式只能设置以“data-”开头的自定义属性。示例代码如下。
1 <body>
2 <div></div>
3 <script>
4 var div = document.querySelector('div');
5 div.dataset.index = '2';
6 div.setAttribute('data-name', 'andy');
7 </script>
8 </body>上述代码中，第5行通过“元素对象.dataset.属性名”的方式为div元素添加属性。第6行通过setAttribute('属性', '值')的方式添加data-name='andy'。
执行上述代码，在浏览器中查看div元素，结果如下所示。
<div data-index="2" data-name="andy"></div>
点击此处
隐藏目录
隐藏目录
