HTML5 data-* 自定义属性

今天在做手机网站的时候，运用了HTML5 data-* 自定义属性，感觉还不错，挺方便的

具体代码：

 <span class="btn fr acw pay_order" data-pay="{$list.id}" data-ispay="{$list.is_pay}" data-paymethod="{$list.pay_method}">立即支付</span>

其中data-pay，data-ispay，data-paymethod都是自定义属性，其值是从后台数据库中循环读出来的。然后通过jquery获取元素值：

$(function(){
$('.pay_order').on('click', function(e){
var is_pay = $(this).data('ispay');
var id = $(this).data('pay');
var pay_method = $(this).data('paymethod');
e.preventDefault();
if(is_pay == 'ok'){
window.location.href = '/shop.php/Index/pay/order_id/' + id + '/pay_method/' + pay_method + '<?=SID_URL?>';
}else if(is_pay == 'no'){
window.location.href = 'https://auth.alipay.com/login/index.htm';
}
});

data 读写方式:

data-*有两种设置方式，可以直接在HTML元素标签上书写

<div id="test" data-age="24">
        Click Here
    </div>

其中的data-age就是一种自定义属性，当然我们也可以通过JavaScript来对其进行操作，HTML5中元素都会有一个dataset的属性，这是一个DOMStringMap类型的键值对集合

var test = document.getElementById('test');
        test.dataset.my = 'Byron';

这样就为div添加了一个data-my的自定义属性，使用JavaScript操作dataset有两个需要注意的地方

1. 我们在添加或读取属性的时候需要去掉前缀data-*，像上面的例子我们没有使用test.dataset.data-my = 'Byron';的形式。

2. 如果属性名称中还包含连字符(-)，需要转成驼峰命名方式，但如果在CSS中使用选择器，我们需要使用连字符格式

为刚才代码追加写内容

<style type="text/css">
        [data-birth-date]
        {
            background-color: #0f0;
            width:100px;
            margin:20px;
        }
    </style>

test.dataset.birthDate = '19890615';
这样我们通过JavaScript设置了data-birth-date自定义属性