自定义属性 data

HTML data-* 属性

在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题，而且关于Attribute和Property的区别也让人十分头痛，在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状

绑定数据方式

• 简单写法

  <div id="testDiv" data-cd="24">
      Click Here
  </div>
  

  var test = document.getElementById('test');
  console.log(test.dataset.cd) //24
  

• 驼峰写法

  <div id="testDiv" data-cartCd="24">
      Click Here
  </div>
  

  var test = document.getElementById('test');
  console.log(test.dataset.cartcd) //24 注意是cartcd，小写
  

• 复杂写法

  <div id="testDiv" data-cart-age="24">
      Click Here
  </div>
  
  

  var test = document.getElementById('test');
  console.log(test.dataset.cartAge) //24 注意写成驼峰
  

  getAttribute/setAttribute 与setdata的区别

  <div id="haha">哈哈</div>
  

  var a = document.getElementById('haha')
  			a.dataset.birthDate = '19890615';
  			a.setAttribute('age', 25);
  			a.setAttribute('data-sex', 'male');
  			
  			console.log(a.getAttribute('data-age')); //24
  			console.log(a.getAttribute('data-birth-date')); //19890516
  			console.log(a.dataset.age); //24
  			console.log(a.dataset.sex); //male
  

  <div id="haha" data-birth-date="19890615" age="25" data-sex="male">
  			hahah
  </div>
  

  a.dataset

  {
      birthDate: "19890615"
  	sex: "male"
  }
  

  这样我们可以看出，两者都把属性设置到了attribute上（废话，要不人家能叫自定义属性），也就是说getAttribute/setAttribute可以操作所有的dataset内容，dataset内容只是attribute的一个子集，特殊就特殊在命名上了，但是dataset内只有带有data-前缀的属性（没有age=25那个）。

  *那么为什么我们还要用data-呢，一个最大的好处是我们可以把所有自定义属性在dataset对象中统一管理，遍历啊神马的都哦很方便，而不至于零零散散了，所以用用还是不错的。

  兼容性

  • Internet Explorer 11+
  • Chrome 8+
  • Firefox 6.0+
  • Opera 11.10+
  • Safari 6+