HTML5 数据集属性dataset
2015-08-08 13:26
816 查看
有时候在HTML元素上绑定一些额外信息,特别是JS选取操作这些元素时特别有帮助。通常我们会使用getAttribute()和setAttribute()来读和写非标题属性的值。但为此付出的代价是文档将不再是合法有效的HTML。
对此,HTML5提供了一个解决方案。在HTML5文档中,任意以"data-"为前缀的小写的属性名字都是合法的。这些“数据集属性”将不会对其元素的表现产生影响,它们定义了一种标准的、附加额外数据的方法,并不是在文档合法性上做出让步。
HTML5还在Element对象上定义了dataset属性。该属性指代一个对象,它的各属性对应于去掉前缀的data-属性。因此dataset.x应该保存data-x属性的值。带连字符的属性对应于驼峰命名法属性名。如Element属性data-jquery-test在js中对应于dataset.jqueryTest属性。
注意,dataset属性是Element的data-属性的实时、双向接口。设置或删除dataset的一个属性就等同于设置或移除对应元素的data-属性。
来源于《JavaScript权威指南》 15.4.3
对此,HTML5提供了一个解决方案。在HTML5文档中,任意以"data-"为前缀的小写的属性名字都是合法的。这些“数据集属性”将不会对其元素的表现产生影响,它们定义了一种标准的、附加额外数据的方法,并不是在文档合法性上做出让步。
HTML5还在Element对象上定义了dataset属性。该属性指代一个对象,它的各属性对应于去掉前缀的data-属性。因此dataset.x应该保存data-x属性的值。带连字符的属性对应于驼峰命名法属性名。如Element属性data-jquery-test在js中对应于dataset.jqueryTest属性。
注意,dataset属性是Element的data-属性的实时、双向接口。设置或删除dataset的一个属性就等同于设置或移除对应元素的data-属性。
var top1=document.getElementById("top1"); var ds=top1.dataset; //Element为<span id="top1" data-jquery-test="lalala">你好!</span> console.log(ds.jqueryTest);//lalala ds.jqueryTest='hello!'; //Element为<span id="top1" data-jquery-test="hello!">你好!</span> console.log(top1.getAttribute("data-jquery-test"));//hello! top1.setAttribute("data-jquery-test2","hello2"); //Element为<span id="top1" data-jquery-test="hello!" data-jquery-test2="hello2">你好!</span> console.log(ds.jqueryTest2);//hello2 delete ds.jqueryTest2; //<span id="top1" data-jquery-test="hello!">你好!</span> console.log(top1.getAttribute("data-jquery-test2"));//null
来源于《JavaScript权威指南》 15.4.3
相关文章推荐
- HTML5 canvas 绘制圆形
- HTML5绘制颜色渐变
- html5开发利器——sublimetext2+emmet插件
- HTML5游戏引擎lufylegend深入浅出 - 引擎介绍&原理
- html5 geolocation / 百度地图api Geolocation 定位当前城市信息
- Html5 WebSocket 技术介绍(转载)
- h5视频播放
- html5:article与section元素
- HTML5中新增的Input类型有哪些
- HW Video Acceleration in Chrome/Chromium HTML5 video 视频播放硬件加速
- AnyChart 7.6.0版本发布【附下载】
- razor 添加html5属性
- 使用html5获取当前手机的经纬度,并接入百度地图API,查询出当前位置
- html5 canvas画图
- 详解HTML5中download属性的应用
- html5拖(drag)放(drop)功能
- 基于html5页面滚动背景图片动画效果
- HTML5应用localStorage保存数据
- HTML5音频Audio
- HTML5 FileReader