HTML中data属性的使用

1. HTML中的data属性

HTML中的data-*属性可以说是无处不在，良好的兼容性，并且可以在view层作短暂的存储数据。
可以看到，例如 bootstrap，validator 等库或者插件都有用到这个方便的属性。

1
<div id="user" data-name="james" data-age="32" data-first-name="lebron"></div>

记得之前自己写验证表单的插件时，也是使用了data-*属性，例如

1
<input id="user" name="user_name" data-is-validated="true" data-validate="true">

这里用data-is-validated表示该输入框是否已经验证过，而data-validate表示该输入框是否合法。 每次提交表单都要验证两个属性。 特别是在需要使用异步接口时的验证，通过判断输入框的状态(可以为未验证/验证等待中/已验证)，来避免异步请求验证时等待返回结果时的验证错误。

摘取一段使用了Angular框架的页面代码:

1
<li ng-repeat="day in days" ng-click="changeDay($event, $index, day)" ng-class="{'true':'active', 'false':''}[(index === $index)]" class="ng-scope active"></li>

这里使用了ng-*的属性，其实也是类似于data-*属性的使用，ng关键字的使用正是Angular的缩写。

2. 可以获取data属性的方法

1. HTML5提供的接口

HTML5提供了接口，通过元素的dataset属性来读写data属性的值，该方法返回一个所选元素data-*的DOMStringMap对象。
但是要注意的是，如果是类似于data-first-name的属性，应该用驼峰标记来获取。

1
2
3
4
5
6
var user = document.getElementById('user');
user.dataset.name;			//james
user.dataset.age;			//32
user.dataset.firstName;		//lebron

user.dataset.name = null;	//去除属性

由于是HTML5提供的接口，而且实际上这个接口非常 鸡肋 ，兼容接口的浏览器版本比较苛刻:

** Chrome8+, Firefox(Gecko)6.0+, InternetExplorer11+, Opera11.10+, Safari6+ **

你没看错，就是IE11+…亮瞎眼了吧。

2. 最原始的读取DOM元素属性的方法

这个没什么，用setAttribute和getAttribute方法就可以获取和修改该属性了…
实际上这样看来data-*的属性和一般的属性也没什么区别嘛。 ╮(╯▽╰)╭

3. jQuery提供的方法

jQuery的$().data()方法可以获取到元素的data-*属性，例如:

1
2
$('#user').data('name'); //james
$('#user').data('name', curry); //curry

jQuery还可以使用attr()来获取data属性

但是要注意的是，使用attr()给元素的data属性赋值时，如果使用data()来获取会获取不到，也就是data()方法和attr()方法是不能通用的，如果你使用的是attr()方法，那么你最好所有的data属性读取都使用attr()方法吧。