HTML5属性data-*的操作

前言

基本现在的主流浏览器都支持data-* 格式的自定义属性[IE11+]

因为原生的管理是在HTML5这个版本才出现的;

但是呢,我们今天说说兼容性比较好的操作自定义属性的方法;

---

jQuery操作自定义属性

jquery来操作属于兼容性相对较好的,因为在比较旧的JQ版本上,就有data()这个事件函数了

/*这里就简单的介绍一下,相当简单*/$('selector').data(key,value); // 这句的意思,设置选择器上自定义属性及值$('selector').data(key);//取到自定义属性值还有另外两种写法:jQuery.data( element, key, value ); //第一个参数是选择元素,其次是自定义属性,最后是值;jQuery.data( element, key);   //返回自定义属性的值还有一种写法:$('selector').attr('data-xxx'); //取值$('selector').attr('data-xxx',"ASASASDWE"); //设置值

---

原生JS操作

兼容性一览

• IE8~9只支持getAttribute和setAttribute来操作

    <input id="test-input"  data-id="999" type="text" />    var test = document.getElementById('test-input');    test.getAttribute('data-id');  //得到 999    test.setAttribute('data-id','1'); //data-id="1"    //删除也相当简单    test.removeAttribute('data-id'); //即可删除该自定义属性

• IE11及其他主流的浏览器(Chrome, Firefox,opera这些)支持原生的dataset

  <input name="username" id="test-user" data-time="18:55" data-id="9" type="text" />   var tu = document.getElementById('test-user');   tu.dataset('id');  //取得值9   tu.dataset('id',100) ; //设置data-id="100"   //这货也能删除自定义属性   delete tu.dataset.id; //会返回true,且删除该自定义属性;

• 两者差异
  - dataset是Attribute的子集, 只操作data-开头的自定义属性, 而Attribute可以操作标签上的所有属性

---

总结

突然想到这方面的内容,就把这个写下来了..当做笔记吧;
现在慢慢从jquery过渡到原生JS,,还有折腾组件化开发这块;
折腾路上任重而道远啊……