原生JS

getAttribute、setAttribute 存取 dataset

<script>

    //get
    var user = document.getElementById("name").getAttribute("data-user");
    console.log(user);

    //set
    
    document.getElementById("name").setAttribute("data-user","拜登");

    //get
    var user = document.getElementById("name").getAttribute("data-user");
    console.log(user);
</script>

该方法不适用要同时获取多个data-xx的值，很麻烦

html5api-dataset API 存取 dataset

<script>
    //返回一个DOMStringMap 类型
    var stringmp = document.getElementById('name').dataset;
    //get
    console.log(stringmp.user);

    //set/add 是一样的操作
    stringmp.age = 74;
    console.log(stringmp.age);


</script>

类似data-star-count该如何处理？要改成驼峰式命名即可

    //返回一个DOMStringMap 类型
    var stringmp = document.getElementById('name').dataset;
    //get
    console.log(stringmp.starCount);

jquery

jQuery.attr 方法存取 dataset

<div id="div" data-user="lisi">hell world</div>



<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>

   //get
var val = $('#div').attr('data-user');
console.log(val) //lisi


   //set
   $('#div').attr('data-user','abc');

   console.log($('#div').attr('data-user')) //abc

</script>

这与get、setAttribute 方法一样，所做出的任何更改，都是可以实时同步到元素data属性

jQuery.data方法存取 dataset

<div id="div" data-user="lisi">hell world</div>



<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>

   //get
var val = $('#div').data('user');
console.log(val) //lisi


   //set
   $('#div').data('user','abc');

   console.log($('#div').data('user')) //abc

</script>