芒果小站

  1. 全球最具业界良心的主机 - Linode

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - Linode

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - Linode

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
1

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

作者 芒果/分类 代码/发布于 2013-04-16 23:27

在书写 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://ejohn.org/blog/html-5-data-attributes/
http://developer.mozilla.org/en-US/docs/DOM/element.dataset

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/html5-custom-data-attribute-element-dataset/" title="HTML5 data-* 自定义属性和 element.dataset" rel="bookmark">HTML5 data-* 自定义属性和 element.dataset | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 1 条群众意见

  1. ilikecss /2013-12-16 09:45

    之前有家公司面试就问了我这个HTML5里date的用法 回应

    #1

下面我简单说几句