如何在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

演示

参考

来自参考：

jQuery 本身使用

.data()

方法以“events”和“handle”名称保存信息，并且还保留任何以下划线（“_”）开头的数据名称供内部使用。

需要注意的是，jQuery 的

data()

不会改变 HTML 中的

data

属性。

因此，如果您需要更改 HTML 中的

data

属性，则应该使用

.attr()

来代替。

HTML

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

jQuery：

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

原生 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 3

您还可以使用以下

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 4

请注意，当您使用 javascript 更改 html5

.data()

属性时，jQuery

data-

不会更新。

如果您使用 jQuery

.data()

设置 HTML 元素中的

data-

属性，您最好使用 jQuery

.data()

来读取它们。否则，如果动态更新属性，可能会出现不一致。例如，请参阅下面的

setAttribute()

、

dataset()

、

attr()

。更改值，按下按钮几次即可看到控制台。

$("#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 5

为了保持 jQuery 和 DOM 同步，一个简单的选择可能是

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

Answer 6

如果您使用 jQuery，请使用

.data()

:

div.data('myval', 20);

您可以使用

.data()

存储任意数据，但使用

.attr()

时仅限于字符串。

Answer 7

[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

。