H5 data-＊ 屬性，設置獲取方法總結

HTML5 data-* 自定義屬性

1.設置方法

A.直接在標籤內書寫，格式以下

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

B.用 js 設置

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

2.獲取方法

var test = document.getElementById('test');
        test.dataset.my = 'Byron';
        test.dataset.birthDate = '19890615';
        test.onclick = function () {
            alert(this.dataset.my + ' ' + this.dataset.age+' '+this.dataset.birthDate);
        }

注意：

1. 咱們在添加或讀取屬性的時候須要去掉前綴data-*，像上面的例子咱們沒有使用test.dataset.data-my = 'Byron';的形式。

2. 若是屬性名稱中還包含連字符(-)，須要轉成駝峯命名方式，但若是在CSS中使用選擇器，咱們須要使用連字符格式

若是使用jQ

<div id="test" data-name="william" data-age="25" gender="male"></div>

上述元素幾個 data 屬性的獲取分別爲：

var div = $('#test')
console.log(div.data('name'))  // 'william'
console.log(div.data('age'))  // 25  (數值)
console.log(div.attr('gender'))  // 'male'

和html5的api不一樣的是，jQuery會嘗試將字符串轉換爲一個JavaScript值（包括布爾值（booleans），數字（numbers），對象（objects），數組（arrays）和空（null））。
若是這樣作不會改變數值的表示，那麼該值將轉換爲一個數字（number）。
例如，「1E02」和「100.000」是等同於數字（數字值100），但將轉換它們會改變他們的表示，因此他們被保留爲字符串。字符串值「100」被轉換爲數字100。

因此，想把一個對象設置到標籤裏，應該這麼寫

div.data('setObj', JSON.stringify({'name': 'william', 'age': 22}))

可是取的時候，只須要

var obj = div.data('setObj')  //  {'name': 'william', 'age': 22}  (object類型，不須要用 JSON.parse() 轉換了)

data 相關的就寫到這裏，不詳盡的地方你們能夠本身嘗試一下，很快就能夠出來的。