关于data-*，html5的新特性之一

看了不少大神对data-*的见解，决定自己总结一份~

几乎所有编程语言都会有自定义属性这种功能，而html5里的data-*则可以解决自定义属性混乱无管理的现状。

两种设置方式：1、直接在html元素标签上书写

<div  id="try"  data-num = "10">

      click it!

</div>

data-num就是一种自定义属性。

2、javascript实现自定义属性

html5中元素都会有一个dataset的属性，这是一个DOMStringMap类型的键值对集合

var try = document.getElementById('try');

     try.dataset.name = "Li";

这样就为div添加了一个data-name的自定义属性。

注意：1.javascript操作时要去掉data-前缀

2.若自定义属性名称含“-”，则在javascript中要以驼峰命名法书写，如：

math-teacher改为mathTeacher（html里的固有属性都是驼峰命名法命名的，这样就统一了）

最后送上一段代码，可以在自己机上试一下~

html：

<div id = "try" data-num = "10">

     click it

</div>

javascript：

var try = document.getElementById('try');

      try.dataset.name = 'Li';

      try.dataset.mathTeacher = 'Wang';

      try.onclick = function(){

             alert(this.dataset.name + ' ' + this.dataset.num + ' ' + this.mathTeacher);

      }

css：

[data-math-teacher]

{

      background-color:#0f0;

      width:100px;

      margin:20px;

}

资料来源：http://www.cnblogs.com/dolphinX/p/3348458.html