HTML5 数据集属性dataset
有时候在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-属性。
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 数据集属性dataset的更多相关文章
- HTML5 学习总结(二)——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- HTML5 学习笔记(二)——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- HTML5学习总结——HTML5新增属性与表单元素
一HTML5新增属性 1.1contcxtmcnu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> < ...
- MindSpore数据集mindspore::dataset
MindSpore数据集mindspore::dataset ResizeBilinear #include <image_process.h> bool ResizeBilinear(L ...
- HTML5新增属性
[sourcecode language="plain"] <!DOCTYPE html> <html manifest="cache.manifest ...
- HTML5 自动聚焦 属性
原文 : HTML5 autofocus Attribut 原文发布时间: 2012年08月27日 翻译时间: 2013年8月6日 HTML5 推出了一大堆精彩的东西给我们. 过去我们要用JavaSc ...
- HTML5新增属性data-*和js/jquery之间的交互
HTML5新增属性data- data-自定义属性,这种方式的自定义属性解决属性混乱无状态管理的现状 书写实例 <div data-role="page" data-last ...
- 『计算机视觉』Mask-RCNN_训练网络其一:数据集与Dataset类
Github地址:Mask_RCNN 『计算机视觉』Mask-RCNN_论文学习 『计算机视觉』Mask-RCNN_项目文档翻译 『计算机视觉』Mask-RCNN_推断网络其一:总览 『计算机视觉』M ...
- 镶嵌数据集 Mosaic Dataset 的常见数据组织方式
镶嵌数据集是ESRI公司推出一种用于管理海量影像数据的数据模型,定义在GeoDatabase数据模型中. 它的常见数据组织方式有两种: 1. 源镶嵌数据集 Source Mosaic Dataset ...
随机推荐
- 文档对象模型DOM通俗讲解
转自:http://www.jb51.net/article/42671.htm 在开始之前先说一点,DOM是非常容易理解的,但是大家说的太官方,让人很是难于理解,我们就用非常简单的语言翻译一遍.加深 ...
- iOS之开发中一些相关的路径以及获取路径的方法
模拟器的位置: /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs ...
- jsp富文本图片和数据上传
好记性不如烂笔头,记录一下. 2016的最后一天,以一篇博客结尾迎接新的一年. 此处用的富文本编辑器是wangEditor,一款开源的轻量级的富文本编辑器,这里着重说一下里面的图片上传功能. 服务器端 ...
- 录像时调用MediaRecorder的start()时发生start failed: -19错误
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- 转: 解决Github访问超慢问题
转自:http://zengrong.net/post/2092.htm 解决Github访问超慢问题 Github is so slowly. 这段时间访问 github 都非常慢,google了一 ...
- Kafka1 利用虚拟机搭建自己的Kafka集群
前言: 上周末自己学习了一下Kafka,参考网上的文章,学习过程中还是比较顺利的,遇到的一些问题最终也都解决了,现在将学习的过程记录与此,供以后自己查阅,如果能帮助到其他人,自然是更好的. ...
- 实现了一个百度首页的彩蛋——CSS3 Animation简介
在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩 ...
- CSharpGL(17)重构CSharpGL
CSharpGL(17)重构CSharpGL CSharpGL用起来我自己都觉得繁琐了,这是到了重构的时候. 下载 CSharpGL已在GitHub开源,欢迎对OpenGL有兴趣的同学加入(https ...
- ADO.NET 核心对象简介
ADO.NET是.NET中一组用于和数据源进行交互的面向对象类库,提供了数据访问的高层接口. ADO.NOT类库在System.Data命名空间内,根据我们访问的不同数据库选择命名空间,System. ...
- Sql Server系列:SQL语句查询数据库中表、视图、存储过程等组成
1. 查看用户表 select name from sys.tables select name from sys.objects where type='U' select name from sy ...