HTML5 Note #3: HTML5 Custom Data Attributes (data-*)

Posted on April 4, 2014

语法

属性名称 属性名必须以 data- 作为前缀，且至少有一个字母，不可大写。

属性值 属性值可以为任意的字符串。

为什么要用 data-* 属性 ？

很久很久以前，在需要对每一个元素存储数据时，大家习惯使用 class 或者 rel 。自然，这么做确实可以获得相应数据，但是这样造成了语义混乱。于是 data-* 出现了，我们可以用 JavaScript 使用这些数据去创造更丰富更吸引人的用户体验，并且无需担心与服务器端产生更多的 Ajax 交互。

什么时候可以用自定义 data 属性呢？

  • To power accessible JavaScript
  • 存储元素的初始高度或者透明度，之后可以被用于计算 JavaScript 的动画效果。
  • 存储通过 JavaScript 加载的 Flash 视频参数。 （不大能理解）
  • To store custom web analytics tagging data. （翻译无能，灰常灰常不能理解）
  • 存储 JavaScript 游戏中元素需要的生命值呀、剩余弹药呀什么的。

用原生 JavaScript 读取 data-* 属性

  1. 可以使用 getAttribute 和 setAttribute 当做普通属性访问，这个在任何浏览器中都能够使用
  2. 使用新的 HTML5 JavaScript API - dataset property，需要支持 HTML5 的现代浏览器

Warning !

如果使用一些缺乏想象力的属性名时，比如 data-height 这样普通滴名字，就很有可能和其他的脚本文件或者引用的 library / plugin 产生冲突。所以建议在普通的名字前面加上关乎这个页面的前缀，比如 data-html5doctor-height。

拓展

需要注意什么？

不要在 data 属性中存储应该可见且可获取的内容，因为辅助工具很可能获取不到这些信息。另外，搜索引擎爬虫也无法为这些 data 属性值建立索引。（参见 Using data-* attributes ）

如何用 jQuery 取值和赋值？

  • 取值：

    你可以传统一点这么做

    $(selector).attr("data-attribute-name")

    或者按照推荐标准这么做（ 如果 jQuery >= 1.4.3 的话）

    $(selector).data("attribute-name")

  • 赋值

    可以这么做

    $(selector).attr("data-attribute-name", "attribute-value")

    或者这么做

    $(selector).data("attribute-name", "attribute-value")

事实上，jQuery.data() 和 javascript 中的 .dataset 还是有些区别的。通过 jQuery.data() 方法设置 data 属性不会修改 DOM ；而通过 dataset 方法则会同步修改 DOM。（参见 [dataset vs jQuery.data()]((http://jsperf.com/dataset-vs-jquery-data) ）

问题

比如在网页版的 listing 中，现在对于每一条 AD 无论其是不是智能插播的 AD 都有一个 data-cpm-sign 属性在，只是智能插播的 AD 有属性值，而普通的 AD 没有属性值而已，比如下面：

	<li data-aid="304104949" data-cpm-sign="" class="media clearfix ">……</li>

Reference

HTML5 Custom Data Attributes (data-*)