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

2022-01-13 06:21:05

在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-*”中名子可以用驼峰命名，最需要注意的一点的取值时必需全部使用小写的名字，否则将会取不到所需要的值。

码农公寓