data-myval = "10" 的 div。我想要更新它的值；如果我使用 div.data('myval',20)，那么它不会改变吗？我只需要使用div.attr('data-myval','20') 吗？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()方法在名称为 "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>
查看此演示
。data()来获取和设置HTML-5数据属性。 - Jashwant[data-myval="10"]{ color: red; }，它将根据data属性的值来设置标签的样式。 - Niki RomagnoliHTML
<div id="mydiv" data-myval="10"></div>
JavaScript：
Using DOM's getAttribute() property
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
Using JavaScript's dataset property
var myval = mydiv.dataset.myval //returns "10"
mydiv.dataset.myval = '20' //changes "data-myval" to "20"
mydiv.dataset.myval = null //removes "data-myval" attribute
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()来读取它们。否则，如果您动态地更新属性，则可能存在不一致性。例如，请查看下面的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>为了使 jQuery 和 DOM 保持同步，一个简单的选项可能是：
$('#mydiv').data('myval',20).attr('data-myval',20);
.data():div.data('myval', 20);
使用 .data() 可以存储任意数据，但使用 .attr() 时只能使用字符串。
.data()方法不会更新data-属性，也就是说，它存储的数据并不会出现在属性中（这也是为什么它可以存储非字符串值），尽管它可以从data-属性中检索该值。虽然我怀疑问题的发布者并不真正需要设置属性，尽管问题提出了这个要求。 - nnnnnn.attr()来检索属性）。我只是觉得值得指出，因为楼主明确（也许是错误地）询问了如何更新属性。 - nnnnnn.attr()，你实际上并没有更新“html”，而是在更新DOM。当你要求浏览器提供“html”（无论是通过.html()还是DOMelement.innerHTML），浏览器实际上是根据DOM的状态重新生成它。有点类似。 - nnnnnn.data() 方法工作的最重要部分。感谢您指出这一点！ - MrUpsidown.data() 方法更新依赖于使用该方法进行管理的内部对象，如果我没记错的话。
如果您想用一些展开方式更新您的 data-attributes ，请使用 --
$('body').attr({ 'data-test': 'text' });
$('body').attr('data-test', 'text'); 将正常工作。$.extend( $('body')[0].dataset, { datum: true } );
HTMLElement.prototype.dataset，而不是任何附加的HTMLElement.prototype.attributes。设置data-属性的另一种方法是使用dataset属性。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
div里面是 jQuery 对象还是元素？ - Braddiv.data('myval')=20这样的语法是错误的，无法存储值 - 请查看答案获取正确的语法。但请注意，.data()实际上并不会更新元素属性，它会将数据存储在其他地方。 - nnnnnn