使用HTML5中的element.dataset操作自定义data-*数据
2016-04-01 17:31
851 查看
不久之前我向大家展示了非常有用的classList API,它是一种HTML5里提供的原生的对页面元素的CSS类进行增、删改的接口,完全可以替代jQuery里的那些CSS类操作方法。而另外一个非常有用的API就是 element.dataset API,从火狐6和Chrome8起就开始对它有了支持。这个简单的API能够让用户
想必大家都知道,我们可以给HTML元素添加自定义的
element.dataset不能够直接拿来用,否者你会遇到报错提示
用JavaScript里使用
名称不能以xml打头
名称里不能有大写字母
假设页面里有下面的元素存在:
要想获取这个
要想获取
给自定义属性赋值的方法是这样的:
如果一个自定义属性并不存在,但在程序中你给它赋值,它会自动创建:
也许你会认为
get或
setHTML页面元素上的
data-*属性。下面我们来看看它是如何使用的!
想必大家都知道,我们可以给HTML元素添加自定义的
data-*属性。你可以给这个属性起任何名字,但在使用element.dataset API时你需要主要以下一些规则:
element.dataset不能够直接拿来用,否者你会遇到报错提示
用JavaScript里使用
data-*属性名时,要把名称转变成驼峰式命名(Camel-Case)
名称不能以xml打头
名称里不能有大写字母
假设页面里有下面的元素存在:
<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>
要想获取这个
data-id属性,你的代码应该写成这样:
// Get the element var element = document.getElementById("myDiv"); // Get the id var id = element.dataset.id;
要想获取
data-my-custom-key属性值,你的代码应该写成这样:
// Retrieves "data-my-custom-key" var customKey = element.dataset.myCustomKey;
给自定义属性赋值的方法是这样的:
// Sets the value to something elseelement.dataset.myCustomKey = "Some other value"; // Element would be: // <div id="myDiv" data-name="myDiv" data-id="myId" // data-my-custom-key="Some other value"></div>
如果一个自定义属性并不存在,但在程序中你给它赋值,它会自动创建:
// Set new data- attributeelement.dataset.mootoolsFtw = "true"; // Element would be: // <div id="myDiv" data-name="myDiv" data-id="myId" // data-my-custom-key="Some other value" data-mootools-ftw="true"> // </div>
也许你会认为
data-*属性里可以存放对象,但事实上不行,dataset不会初始化这些对象。我不清楚dataset对长度的限制,但在里面存放大量的数据必定会是DOM变得臃肿不堪,很难调试。喜欢使用jQuery的朋友应该知道jQuery里也有相应的
$.data()方法,没错,HTML5里的这个原生的dataset就是来替代它的,如果你的页面只需要简单的操作
data-*自定义属性,就不需要引入这些体积越来越多的jQuery工具库了,不是吗?
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 原生js结合html5制作小飞龙的简易跳球
- C#检测DataSet是否为空的方法
- C#通过DataSet读写xml文件的方法
- C#使用DataSet Datatable更新数据库的三种实现方法
- C#从数据库读取数据到DataSet并保存到xml文件的方法
- c#使用Dataset读取XML文件动态生成菜单的方法
- DataReader、DataSet、DataAdapter和DataView使用介绍
- DataSet与DataTable的区别示例介绍
- C#中的DataSet、string、DataTable、对象转换成Json的实现代码
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- 关于javascript中dataset的问题小结
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法