HTML5 data-* 自定义属性详解

HTML5增加了一个新特性——data-*自定义属性。

可以往HTML标签上添加任意以 "data-"开头的属性，这些属性在页面上是不显示的，也不会影响到页面布局和风格，但它却是可读可写的。

使用data-*自定义属性可以解决自定义属性混乱无管理的现状。

设置方式：

一、直接在HTML元素标签上书写

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

二、通过JavaScript的dataset的属性

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>

存取方式：

1、getAttribute()和setAttribute()方法存取传统的自定义属性的值

var username = document.getElementById('username');
// 使用setAttribute设置自定义属性
username.setAttribute ('blog', 'http://blog.csdn.net/zhouziyu2011');
// 使用getAttribute获取自定义属性：
alert(username.getAttribute('age')); // 输出：23
alert(username.getAttribute('blog')) ; // 输出：http://blog.csdn.net/zhouziyu2011

2、getAttribute()和setAttribute()方法存取data-*自定义属性的值

<input id="username" data-age="23">

var username = document.getElementById('username');  
// 使用setAttribute设置 data- 属性  
username.setAttribute ('data-blog', 'http://blog.csdn.net/zhouziyu2011');  
// 使用getAttribute获取data-*属性：  
alert(username.getAttribute('data-age')); // 输出：23  
alert(username.getAttribute('data-blog')) ; // 输出：http://blog.csdn.net/zhouziyu2011

getAttribute()和setAttribute()方法能在所有浏览器中正常工作，和传统的自定义属性没有什么区别，只是属性名不一样，没有体现HTML 5的data-*自定义属性的真正目的。

3、dataset属性存取data-*自定义属性的值

dataset属性是HTML5 JavaScript API的一部分，用来返回一个包含选择元素的所有data-*属性的DOMStringMap对象。

使用dataset属性时，不使用完整的属性名，应该去掉data-前缀，如 data-age属性名转换后应该是age。

data-属性名如果包含了连字符，去掉data-前缀后需要转换为驼峰式命名，如data-date-of-birth属性名转换后应该是dateOfBirth 。

var username = document.getElementById('username');
// 使用dataset设置 data- 属性
username.dataset.dateOfBirth = '1993-12-06';
// 使用dataset获取data-*属性：
alert(username.dataset.age) ; // 输出：23
alert(username.dataset.dateOfBirth) ; // 输出：1993-12-06

4、data-*属性选择器

（1）jQuery属性选择器：

$("input[data-age]").css("background","red");

（2）CSS属性选择器：

input[data-age] {  
    background:red;  
}