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

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

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

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

请注意，jQuery .data()不会更新当你改变html5的数据属性与javascript。

如果你使用jQuery .data()来设置HTML元素中的数据属性，你最好使用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>

Vanilla Javascript解决方案

HTML

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

JavaScript:

使用DOM的getAttribute()属性 var brand = mydiv.getAttribute("data-myval")//返回"10" mydiv。setAttribute("data-myval"， "20") //修改"data-myval"为"20" mydiv.removeAttribute("data-myval") //完全删除"data-myval"属性 使用JavaScript的dataset属性 Var myval = mydiv.dataset.myval //返回"10" Mydiv.dataset.myval = '20' //更改"data-myval"为"20" Mydiv.dataset.myval = null //删除data-myval属性

如果你正在使用jQuery，请使用.data():

div.data('myval', 20);

可以使用.data()存储任意数据，但使用.attr()时只能存储字符串。

设置data-属性的另一种方法是使用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