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属性

// jquery方式

var $testData = $("#test");

$testData.data("name");  // 读取data-name的值

$testData.data("age",18);  // 设置data-age的值

$testData.removeData("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属性

// jquery方式

var $testData2 = $("#test2");

$testData2.data("userName");  // 读取data-user-name的值

$testData2.data("userAge",18);  // 设置data-user-age的值

$testData2.removeData("userAge");  // 删除data-user-age属性