关于H5的自定义属性data-*

Posted 2020-10-02 s_qiu

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‘)); //读