使用 HTML5 data 属性

一、HTML5的data 属性，本质就是：一个用于保存数据的自定义属性。它们总是以 data- 作为前缀，后面跟随着描述性的（只允许小写字母和连接字符-hyphens）。

一个元素可以有任意数量的 data 属性。

<li data-id="1234" data-email="123456789@qq.com" data-age="22">Calvin</li>

使用 data 属性，需要记住一点，data 属性不能保存对象。如果你真的想要保存对象，可通过对象序列化。

1.标题使用 jQuery 读/写 data 属性

使用 jQuery 的 .attr() 方法：

// 取值
var cmd = $("#your-button-id").attr('data-cmd'); // $("#your-button-id").data('data-cmd');
var id = $("#your-button-id").attr('data-id');

// 赋值
$("#your-button-id").attr('data-cmd', yourNewCmd).attr('data-id', yourNewId);

2.添加样式

你也可以通过 data 属性来添加样式。如何通过元素的一个固定 data 属性来应用样式呢？

<span class="label" data-warning>

再就是样式

[data-warning] {
background: red;
}

如果想要通过 data 属性值，来添加样式呢？这可以应用到任何包含有 error 的 data-warning 属性。

[data-warning*=error] {
color: red;
}