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

Question

我有一个属性为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

Demo

Reference

参考文献：

  

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

应该注意的是，jQuery的data()不会更改HTML中的data属性。

因此，如果您需要更改HTML中的data属性，则应使用.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>

请参阅this demo

Answer 2

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

如果您使用jQuery .data()在HTML元素中设置data-属性，最好使用jQuery .data()来阅读它们。否则，如果动态更新属性，则可能存在不一致。例如，请参阅下面的setAttribute()，dataset()，attr()。更改值，按几次按钮，然后查看控制台。

＆＃13;

＆＃13;

$("#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])
})

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您还可以使用以下attr内容;

<强> HTML

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

<强>脚本

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

OR

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

Answer 4

Vanilla Javascript解决方案

<强> 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()时，您只能使用字符串。

Answer 6

[jQuery] .data（）vs .attr（）vs .extend（）

如果我正确的话，jQuery方法.data()会通过使用该方法更新jQuery管理的内部对象。

如果您想更新data-attributes点差，请使用

$('body').attr({ 'data-test': 'text' });

- 否则，$('body').attr('data-test', 'text');将正常工作。

另一种可以实现此目的的方法是使用 -

$.extend( $('body')[0].dataset, { datum: true } );

- 将任何属性更改限制为HTMLElement.prototype.dataset，而不是任何其他HTMLElement.prototype.attributes 。

Answer 7

设置数据属性的另一种方法是使用dataset属性。

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

const el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

// set the data attribute
el.dataset.dateOfBirth = '1960-10-03'; 
// Result: el.dataset.dateOfBirth === 1960-10-03

delete el.dataset.dateOfBirth;
// Result: el.dataset.dateOfBirth === undefined

// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// Result: 'someDataAttr' in el.dataset === true

Answer 8

要使jQuery和DOM保持同步，一个简单的选项可能是

$('#mydiv').data('myval',20).attr('data-myval',20);