如何在HTML元素中设置数据属性

我有一个属性data-myval = "10"的div。 我想更新它的价值; 如果我使用div.data('myval',20)不会改变吗？ 我需要使用div.attr('data-myval','20')吗？

我对HTML5和jQuery感到困惑吗？ 请指教。 谢谢！

编辑：更新div.data('myval')=20 div.data('myval',20) ，但HTML仍然不更新。

Answer 1

HTML

 <div id="mydiv" data-myval="10"></div> 

JS

 var a = $('#mydiv').data('myval'); //getter $('#mydiv').data('myval',20); //setter 

演示

参考

编辑（评论后）：

如果你检查上面给出的参考

jQuery本身使用.data()方法将信息保存在名称“事件”和“句柄”下，并保留任何以下划线（'_'）开头的数据名称供内部使用。

为什么你需要改变HTML？

如果改变html是绝对必要的，你应该使用.attr()

HTML

 <div id="outer"> <div id="mydiv" data-myval="10"></div> </div> 

JS：

 alert($('#outer').html()); // alerts <div id="mydiv" data-myval="10"> </div> var a = $('#mydiv').data('myval'); //getter $('#mydiv').attr("data-myval","20"); //setter alert($('#outer').html()); //alerts <div id="mydiv" data-myval="20"> </div> 

看到这个演示

Answer 2

你也可以使用下面的attr东西;

HTML

 <div id="mydiv" data-myval="JohnCena"></div> 

脚本

  $('#mydiv').attr('data-myval', 'Undertaker'); // sets $('#mydiv').attr('data-myval'); // gets 

要么

 $('#mydiv').data('myval'); // gets value $('#mydiv').data('myval','John Cena'); // sets value 

Answer 3

请注意，当您使用javascript更改html5 data-属性时，jQuery .data()不会更新。

如果使用jQuery .data()在HTML元素中设置data-属性，最好使用jQuery .data()来读取它们。 否则，如果dynamic更新属性，可能会出现不一致。 例如，请参阅下面的setAttribute() ， dataset() ， attr() 。 更改该值，多次按下button并查看控制台。

 $("#button").on("click", function() { var field = document.querySelector("#textfield") switch ($("#method").val()) { case "setAttribute": field.setAttribute("data-customval", field.value) break; case "dataset": field.dataset.customval = field.value break; case "jQuerydata": $(field).data("customval", field.value) break; case "jQueryattr": $(field).attr("data-customval", field.value) break; } objValues = {} objValues['$(field).data("customval")'] = $(field).data("customval") objValues['$(field).attr("data-customval")'] = $(field).attr("data-customval") objValues['field.getAttribute("data-customval")'] = field.getAttribute("data-customval") objValues['field.dataset.customval'] = field.dataset.customval console.table([objValues]) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h1>Example</h1> <form> <input id="textfield" type="text" data-customval="initial"> <br/> <input type="button" value="Set and show in console.table (F12)" id="button"> <br/> <select id="method"> <option value="setAttribute">setAttribute</option> <option value="dataset">dataset</option> <option value="jQuerydata">jQuery data</option> <option value="jQueryattr">jQuery attr</option> </select> <div id="results"></div> </form> 

Answer 4

试试这也是：

HTML

 <div id="mydiv" data-myval="10"></div> 

JavaScript的：

• 使用DOM的getAttribute()属性

    var brand = mydiv.getAttribute("data-myval")//returns "10" mydiv.setAttribute("data-myval", "20") //changes "data-myval" to "20" mydiv.removeAttribute("data-myval") //removes "data-myval" attribute entirely 

• 使用JavaScript的dataset属性

   var myval = mydiv.dataset.myval //returns "10" mydiv.dataset.myval = '20' //changes "data-myval" to "20" mydiv.dataset.myval = null //removes "data-myval" attribute 

Answer 5

如果您使用jQuery，请使用.data() ：

 div.data('myval', 20); 

您可以使用.data()存储任意数据，但在使用.attr()时仅限于string。