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

Vanilla Javascript solution

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

• 使用JavaScripts qazxsw poi属性 qazxsw poi

Answer 2

如果您使用的是jQuery，请使用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

您可以使用.data()存储任意数据，但在使用div.data('myval', 20); 时仅限于字符串。

Answer 3

[jQuery] .data（）vs .attr（）vs .extend（）

如果我是正确的，jQuery方法.data()通过使用该方法更新由jQuery管理的内部对象。

如果您想更新您的.attr()有一些传播，请使用 -

.data()

- 否则，data-attributes将工作得很好。

另一种可以实现此目的的方法是使用 -

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

- 将任何属性更改限制为$('body').attr('data-test', 'text');，而不是任何额外的$.extend( $('body')[0].dataset, { datum: true } ); 。