data-* 是H5的新屬性，用來讓開發者對標簽添加自定義屬性的。

其讀寫方式有如下幾種：

1. 如果是 data-abc 的格式，則采用正常格式 abc 來讀寫該屬性值

   <div id="content" data-age="18">html5 data-*自定義屬性 age</div>

   // 原生 js 方式讀寫

   var content= document.getElementById(‘content‘);

   console.log(content.dataset.age);//讀

   content.dataset.name ="小白”;//寫

   console.log(content.dataset.name);//讀

   // jquery 方式讀寫

   console.log($(‘#content‘).data(‘age‘));//讀

   $(‘#content‘).data(‘name‘, "小黑");//寫

   console.log($(‘#content‘).data(‘name‘));//讀

2. 若果是 data-abc-abc-abc 的格式，則采用首字母小寫的駝峰式 abcAbcAbc 讀寫該自定義屬性值

   <div id="content" data-user-list="user_list">data-user-list自定義屬性 </div>

   var list = [{name: "aa", age: 18},{name: "bb", age: 20}]

   // 原生 js 獲取方式

   var content= document.getElementById(‘content‘);

   console.log(content.dataset.userList);//讀

   content.dataset.userList=list;//寫

   console.log(content.dataset.userList);//讀

   // jquery 方式讀寫

   console.log($(‘#content‘).data(‘userList‘));//讀

   $(‘#content‘).data(‘userList‘, list);//寫

   console.log($(‘#content‘).data(‘userList‘));//讀

3. getAttribute/setAttribute方法的使用

   <div id="content" data-name="小a">data-user-list自定義屬性 </div>

   var content= document.getElementById(‘content‘);

   content.dataset.birthDate = ‘19990619‘;//寫

   content.setAttribute(‘age‘, 25);//寫

   console.log(content.getAttribute(‘data-birth-date‘)); //讀

   console.log(content.getAttribute(‘data-age‘)); //讀

關於H5的自定義屬性data-*