HTML data-* 属性

前言

html5 允许我们在 HTML 标签上添加自定义属性来存储和操作数据。你可以往 HTML 标签上添加任意以 "data - " 开头的属性，这些属性页面上是不显示的，它不会影响到你的页面布局和风格，但它却是可读可写的。

使用说明

data -* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的同时并存储数据的能力。存储的（自定义）数据能够被页面中的 JavaScript 中使用，以创建更好的用户体验（无需 Ajax 请求或服务器端数据库查询，毕竟网络请求需要时间）。

data -* 属性包括两部分：

-- 属性名，不应该包含任何大写字母，并且在前缀 "data - " 之后必须有至少一个字符；

-- 属性值，可以是任意字符串；

语法

直接在 html 标签上添加自定义属性

Owl
Tarantula

接下来在 js 中就可以读取/设置自定义属性的值；

用 js 操作自定义属性

1 > 原生 js 方式操作：

原生 js 操作自定义属性，必须通过 dataset 对象来完成。 html5 中每个标签都可以通过 dataset 对象操作标签上的自定义属性值；

var a= document.getElementById("a");
//设置
a.dataset.username="sunyang"; //此时 element 中 data-username="sunyang"

//读取
console.log(a.dataset.username);//输出“sunyang”

//多单词分割 自定义属性 的操作
//设置
a.dataset.userType = "1"; //此时 element 中 data-user-type="1"

//读取
console.log(a.dataset.userType)；

2 > JQuery 方式操作：

jQuery1 . 4 . 3 版本后内置了专用方法来操作自定义属性。使用 jQuery 的. data() 方法来访问这些 "data -* " 属性，它能读取/设置相应的 data 属性。

//设置
$("#a").data("username","sunyang");//此时 element 中 data-username="sunyang"

//读取
var username= $("#a").data('username'); 
console.log(username); // 输出 "sunyang"

//多单词分割 自定义属性 的操作
//设置
$("#a").data("userType","1"); //此时 element 中 data-user-type="1"

//读取
console.log(  $("#a").data("userType")  )；

也可以把自定义属性当做普通属性来访问，使用 jQuery 的 attr() 方法来访问这些 "data -* " 属性，也可以读取/设置相应的 data 属性。

//设置
$("#a").attr("data-username","sunyang");//此时 element 中 data-username="sunyang"

//读取
var username = $("#a").attr("data-username");
console.log(username); // 输出 "sunyang"

Tips

1 . 使用原生 js 的 dataset 或者 jquery 的 data() 方式操作自定义属性时，需注意多单词分割属性在 js 中书写方式的变化；

2 . 使用原生 js 的 dataset 和 jquery 的 attr() 赋值，都会改变 dom 树，页面中的 data - test 会改变；而使用 jquery 的 data （）并不会重构 dom 树，所以 element 中的 data - test 是不会改变的。