HTML5实战与剖析之自定义数据属性(dataset)
来源:互联网 发布:mysql limit where优化 编辑:程序博客网 时间:2024/06/09 13:38
说道HTML5实战与剖析之自定义数据属性,我就想起以前在外面学习JavaScript的时候了,那时候真可谓是跟打了鸡血似的,永远那么兴奋。早在那个时候,我就听说过自定义属性这回事儿了。下面就为大家介绍一下有关自定义属性的事儿吧。
HTML5实战与剖析之如何自定义数据属性
自定义属性,可以在标签部分添加一些自定义属性,不用刻意有一些前缀的。但是HTML5新添加的自定义数据属性和以往的自定义属性不一样。HTML5中可以为元素添加非标准的属性,但是要添加data-前缀,目的就是为元素提供与渲染无关的信息,或者语义信息。给标签添加data-开头的属性,”-”后面名字可以随便起。小例子如下。
HTML代码
<div id="meng" data-long="5211314" data-li="limenglong">梦龙小站</div>
HTML5实战与剖析之如何获取自定义数据属性(dataset)
添加了自定义数据属性之后,可以通过元素的dataset属性来访问自定义属性的值。dataset属性的值是DOMStringMap的一个实例。DOMStringMap是名值对儿的映射。在这个映射中,每个data-name形式的属性都会有一个对应的属性,只不过属性名没有data-前缀(比如,自定义属性是data-myname,那映射中对应的属性就是myname)。小例子如下。
HTML代码
<div id="meng" data-long="5211314" data-li="limenglong">梦龙小站</div>
JavaScript代码
window.onload = function(){var oDiv = document.getElementById("meng");//获取自定义数据属性var oLong = oDiv.dataset.long;var oLi = oDiv.dataset.li;alert(oLi)//设置自定义数据属性oDiv.dataset.long = 123456;oDiv.dataset.li = "lml";//有没有"meng"值if(oDiv.dataset.long){alert("long:" + oDiv.dataset.long); //long:123456}};
预览效果
如果需要给元素添加一些不可见的数据以便进行其他处理,那就要用到自定义数据属性。在跟踪链接或者混搭应用中,通过自定义数据属性能够方便地知道点击来自页面中的哪个部分。dataset属性支持的浏览器有Firefox 6+ 和 Chrome。
HTML5实战与剖析之自定义数据属性就为大家介绍到这里,HTML5中的自定义数据属性和之前的自定义属性区别不大,主要是可以通过dataset属性获取和设置了,还有就是在取名的时候之前要加前缀”data-”。更多有关HTML5实战与剖析的小东东敬请关注梦龙小站的相关更新。
- HTML5实战与剖析之自定义数据属性(dataset)
- HTML5实战与剖析之classList属性
- HTML5实战与剖析之字符集属性(charset和defaultCharset)
- HTML5实战与剖析之HTMLDocument变化(readyreState属性、兼容模式和head属性)
- HTML5实战与剖析之表单——自动获取焦点属性(autofocus属性)
- HTML5中的数据集dataset和自定义属性data-*
- HTML5中的数据集dataset和自定义属性data-*
- HTML5自定义属性对象Dataset
- HTML5实战与剖析之延迟脚本
- HTML5实战与剖析之剪贴板事件
- HTML5实战与剖析之WebSockets简介
- HTML5实战与剖析之WebSocket协议
- HTML5实战与剖析之离线应用
- HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)
- HTML5实战与剖析之媒体元素(2、媒体元素的属性)
- HTML5实战与剖析之使用HTML5 WebSocket API
- HTML5自定义属性对象Dataset简介
- HTML5 data-* 自定义属性和 element.dataset
- 20个超实用的JavaScript技巧及最佳实践(上)
- OpenGL着色器(二)
- shoelace源代码分析之bootlace
- CodeForces Good Bye 2013
- 服务器-apache-common-httpclient测试
- HTML5实战与剖析之自定义数据属性(dataset)
- php xmlrpc的简单实用
- 电子商务马志伟C#实验报告
- js 读取cookie 添加 删除
- 加载性能优化ViewHolder
- Outdoor Light Scattering From Intel
- 计算阶乘n!末尾所含0的个数
- cookie.js js操作cookie
- Spring与Struts配置文件笔记