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

div.data('myval', 20);

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

超文本标记语言

<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()代替。

超文本标记语言

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

看到这个演示

Vanilla Javascript解决方案

超文本标记语言

<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
  

• 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
  

请注意，当你用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>

你也可以使用下面的attr;

超文本标记语言

<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

[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.;

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

<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

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

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