您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > 前端开发 > HTML5&CSS3

HTML5 data-* 自定义属性和 element.dataset

作者:UncleToo  来源:互联网  日期:2013-10-19 18:16:16
收藏  评论:( 0 )  阅读:54

在书写 HTML 代码时,通常需要在 DOM 结构中为 JS 预留数据钩子,而这些钩子通常是这样实现的:

<div id="test" url="http://www.uncletoo.com">UncleToo</div>

HTML5 更好的规范了这种使用方式:

<div id="test" data-url="http://www.uncletoo.com">UncleToo</div>

获取自定义数据属性的方式是一致的:

document.getElementById('test').getAttribute('data-url');

实际应用场景中,自定义属性通常是多个同时存在,继而会有如下几种写法:

<div id="test" data-url="http://www.uncletoo.com" data-author="tinyhill">UncleToo</div>
<div id="test" data-config="{'url':'http://www.uncletoo.com','author':'tinyhill'}">UncleToo</div>

如果是第二种写法,一般会通过 eval 或者 JSON.parse 的方式将其解析为 JS 字面量对象,但常常会因为单引号双引号的问题出现各种陷阱。

对第一种遵循 HTML5 标准的书写方式,高级浏览器已经做了 dataset 的支持,即:

document.getElementById('test').dataset;

执行结果是一个 DOMStringMap 类型的对象:

{url:"http://www.uncletoo.com",author:"tinyhill"}




HTML5
 
DOM
 
除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/html5/393.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论