HTML5 data-* 自定义属性和 element.dataset
发布时间：2018-10-05 19:02:11 所属栏目：经验 来源：站长网
导读：在书写 HTML 代码时，通常需要在 DOM 结构中为 JS 预留数据钩子，而这些钩子通常是这样实现的： div id=test url=http://www.mangguo.org芒果小站/div HTML5 更好的规范了这种使用方式： div id=test data-url=http://www.mangguo.org芒果小站/div 获取自定
|
在书写 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"} （编辑：南京站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读