最火下载站首页
手机版
最火下载站
关注公众号
最火下载站

当前位置:首页 > 网络知识 > Web前端 > Html/css> HTML5 data-* 自定义属性和 element.dataset

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

文章作者:网友投稿 发布时间:2013-04-20 20:54:48 来源:网络

在书写 HTML 代码时,通常需要在 DOM 结构中为 JS 预留数据钩子,而这些钩子通常是这样实现的,芒果小站/div HTML5 更好的规范了这种使用方法

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

芒果小站


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

芒果小站


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

document.getElementById('test').getAttribute('data-url');
实际应用场景中,自定义属性通常是多个同时存在,继而会有如下几种写法:

芒果小站


芒果小站


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

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

document.getElementById('test').dataset;
执行结果是一个 DOMStringMap 类型的对象:

{url:"http://www.mangguo.org",author:"tinyhill"}

上一篇: 解决父容器高度不能自动撑开的方法

下一篇: 如何编辑mht格式的文件,什么是mht?

共有0条评论网友评论
游戏