关于html5 data-*自定义属性相关注意点和踩过的坑

在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,命名可以用驼峰命名方式,但取值是必需全部使用小写(后面会说),使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。

1.html绑定数据写法

1.1简单字母写法:

<div id="testDiv" data-cd="24">
Click Here
</div>

1.2  使用驼峰命名(需要特定注意的地方):

<div id="testDiv" data-cartCd="24">
Click Here
</div>

2. 取绑定的值方法

2.1原生的js取法:

var testDiv = document.getElementById('testDiv');

简单的单词:console.log(testDiv.dataset.cd);

复杂的驼峰命名单词:console.log(testDiv.dataset.cartcd);  //注意是“cartcd”,不管是不是驼峰命名,一切都是小写。

2.2使用Jquery方法:

console.log($(“#testDiv”).data(“cd”));

console.log($(“testDiv”).data(“cartcd”));  //同上面一样,注意是“cartcd”,不管是不是驼峰命名,一切都是小写。

和html5的api不同的是,jQuery会尝试将字符串转换为一个JavaScript值(包括布尔值(booleans),数字(numbers),对象(objects),数组(arrays)和空(null))。

3.  修改绑定数据

原生js方式:

testDiv.dataset.cartcd= “新值”

Jquery方式:

$(“testDiv”).data(“cartcd”,”新值”)

4.  开发过程中的使用方式

其实这个属性是html5新加的特性,为了绑定数据,我们可以将一些参数绑定到dom标签上,而不用将数据填 到input标签上然后隐藏该标签。”data-*”中名子可以用驼峰命名,最需要注意的一点的取值时必需全部使用小写的名字,否则将会取不到所需要的值。

上一篇:MySQL高级知识(十一)——Show Profile


下一篇:Python开发【前端篇】HTML5+CSS3