原生js

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

jquery

jQuery的attr()方法

這與get、setAttribute 方法一樣，所做出的任何更改，都是可以實時同步到元素data屬性

<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>
 

jQuery的data()方法

這種方式修改data屬性不會更改

<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>
 

jQuery的data()方法還支援自動解析json字串

<div id="div" data-json='{"name":"lisi","age":"40"}'>hell world</div>

let data = $("#div").data("json");

html5api-dataset API 存取 dataset

    //返回一個DOMStringMap 型別
    var stringmp = document.getElementById('name').dataset;
    //get
    console.log(stringmp.user);

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

類似data-star-count該如何處理？要改成駝峰式命名即可

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