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. 取绑定的值方法

原生的js取法：

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

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

复杂的驼峰命名单词：console.log(testDiv.dataset.cartcd);//注意是“cartcd”,不管

//是不是驼峰命名，一切都是小些。

使用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”,”新值”)

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

HTML5 data-* 自定义属性及其注意点相关推荐

html自定义datajs,科技常识：HTML5的自定义属性data-*详细介绍和JS操作实例
今天小编跟大家讲解下有关HTML5的自定义属性data-*详细介绍和JS操作实例 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5的自定义属性data-*详细介绍和JS操作实例的 ...
html5 data src显示,srcdoc =“…”和src =“data：text/html,…”之间的区别是什么？
例如,这是它们之间的区别: 并且,如果他们是完全相同的,为什么HTML5添加srcdoc属性? 编辑也许我不够清楚.我没有比较src与srcdoc,但src使用text / html数据URI与sr ...
html5 data url,HTML5 / Javascript – DataURL到Blob和Blob到DataURL
使用我的代码在javascript中的dataURL和blob对象之间进行转换. (优于链接中的代码) //**dataURL to blob** function dataURLtoBlob(dat ...
data自定义属性获取方法和设置
<div data-id="id=1"></div><script>//js原生获取方法 var id = ...
html元素data属性设置变量,HTML5 自定义属性 data-* 和 jQuery.data 详解
编辑注:HTML中使用data-xx="xx"开头标记的属性到底有什么用,直接使用xx="xx"不是更简单吗?其实data-xx是HTML5的一个属性,支持通过 ...
html5 自定义属性data-*
html5 提供自定义属性,格式是data-* 可以用来存放数据集主要有两种方式 1.直接在元素里面设置 <div id="ageId" data-age ="2 ...
使用HTML5的自定义数据属性的jQuery选择器
本文翻译自:jQuery selectors on custom data attributes using HTML5 I would like to know what selectors are ...
html5在哪编译,HTML5_提供的新功能_less 编译_
HTML5_提供的新功能 class 操作 ele.classList(注意: 高版本的 IE 都不支持) 获取 ele.classList.add("current"); el ...
html5窗口播放插件,基于jQuery UI的模拟windows窗口插件
jquery-lwd是一款轻量级的基于jQueryUI的模拟windows窗口插件.该插件可以模拟windows窗口,对窗口进行最大化,最小化,拖动等操作.并提供windows2000经典主题效果.它 ...
使用data attributes
本文由本人翻译自:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes HTML5是具有扩展性的设 ...

HTML5 data-* 自定义属性及其注意点

HTML5 data-* 自定义属性及其注意点相关推荐

最新文章

热门文章