javascript html5 追加 后继,HTML5 新增属性data-* js/jquery取值和改变值的问题

前一阵，后台用ifelse表达式直接返回html片段,由于传值问题，我直接让他把值放在data-上，我自己来取，由于自定义私有值的特性，很好的解决了传值的问题。不过由于自己的粗心，导致测试当中，取值方式不当，发生取不到值的现象。现在小结一下，避免以后出现同样的错误。

首先列出data-属性名的几种情况：

data-username

data-user-name

data-userName

data-user-Name

data-Username

data-UserName

data-USERNAME

以上几种data-属性名的情况都是正确的。不过通过data()方法取值时属性名情况就不一样了。看下面：

//原生js是通过DOM对象的dataset来取data-值，取值后属性名格式同data()一样

$('.box').each(function(){

console.log($(this).data())

})

//{username: "zhd1"}

//{userName: "zhd2"}

//{username: "zhd3"}

//{userName: "zhd4"}

//{username: "zhd5"}

//{username: "zhd6"}

//{username: "zhd7"}

不同data-属性名的格式，取值后的属性名也不一样。data-属性名格式大概有以上7种情况。

从以上取值情况可以看出，区别就在data-属性名是否用-隔开：

如果属性名用-隔开，取值后的属性名是驼峰格式。

如果属性名是没有用-隔开的字符串，无论大小写，取值后的属性名是小写字符串。

以上是取data-值时需要注意的点。

众所周知，jquery提供了可以操作HTML标签属性的方法---attr(),对应的js也有getAttribute()和setAttribute()两种方法。如果说为了避免data()方法取值的属性名问题，可以直接用以上方法操作。

接下来说说data()改变值的情况，首先我用此方法改变class="box1"的属性值:

$('.box1').data('username','myname');

然后在控制台看一下这个标签data-值是否改变了：

WechatIMG928.jpeg

发现标签上的值并没有像我们预想的那样改变。

如果打印一下试试看呢？

console.log($('.box1').data('username'))

//myname

虽然标签上的属性值没有改变，但是通过以上操作，属性值确实发生改变，只是没有体现在标签上而已。所以，一旦标签上data-属性值写定，利用data()方法改变data-属性值，并不会直接改变标签上的属性值。如果想改变标签上的data-属性值，请用jquery提供的attr()或者js的setAttribute()。

以上是个人见解，如有错误，请指正。多谢！