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

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

<div id="test" url="http://www.mangguo.org">芒果小站</div>

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

<div id="test" data-url="http://www.mangguo.org">芒果小站</div>

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

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

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

<div id="test" data-url="http://www.mangguo.org" data-author="tinyhill">芒果小站</div>
<div id="test" data-config="{'url':'http://www.mangguo.org','author':'tinyhill'}">芒果小站</div>

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

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

document.getElementById('test').dataset;

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

{url:"http://www.mangguo.org",author:"tinyhill"}
转载自: http://www.mangguo.org/html5-custom-data-attribute-element-dataset/
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值