data-set
- HTML5新特性-自定义属性
- 在HTML5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放 使用data-set可以获取这些数据
```
data属性的设置和读取方式:
1、data-xxx 的格式,则采用正常格式来读写该属性值
<div id="test" data-name="小明">自定义属性data-name</div>
// 原生js方式
var testData = document.getElementById("test");
console.log(testData.dataset.name); // 读取data-name的值
console.log(testData.getAttribute("data-name")); // 读取data-name的值
testData.dataset.age = 18; // 设置data-age的值
testData.setAttribute("data-age",18); // 设置data-age的值
testData.removeAttribute("data-age"); // 删除data-age属性
2、data-xxx-yyy-zzz的格式,则采用首个单词的首字母小写的驼峰式xxxYyyZzz读写该自定义属性值
<div id="test2" data-user-name="小明">自定义属性data-user-name</div>
// 原生js方式
var testData2 = document.getElementById("test2");
console.log(testData2.dataset.userName); // 读取data-user-name的值
console.log(testData2.getAttribute("data-user-name")); // 读取data-user-name的值
testData.dataset.userAge = 18; // 设置data-user-age的值
testData2.setAttribute("data-user-age",18); // 设置data-user-age的值
testData2.removeAttribute("data-user-age"); // 删除data-user-age属性