如何在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仍然不更新。

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> 

看到这个演示

你也可以使用下面的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 

请注意,当您使用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> 

试试这也是:

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 

如果您使用jQuery,请使用.data()

 div.data('myval', 20); 

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