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

你也可以使用下面的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

[jQuery] .data() vs .attr() vs .extend()

jQuery方法.data()通过使用该方法更新由jQuery管理的内部对象，如果我没有错的话。

如果你想用一些扩展来更新你的数据属性，使用——

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

——否则为$('body')。attr(“测试数据”、“文本”);会工作得很好。

另一种实现方法是使用——

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

——它限制了对HTMLElement.prototype的任何属性更改。数据集，而不是任何额外的HTMLElement.prototype.attributes。

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()时只能存储字符串。

HTML

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

JS

var a = $('#mydiv').data('myval'); //getter

$('#mydiv').data('myval',20); //setter

Demo

参考

参考文献:

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>

请看这个演示