data-*的赋值与获取

常用到获取和赋值data-属性值的方法有一下几种

  1. data() 兼容ie8及以上
  2. dataset 兼容ie10+
  3. attr()
 <div id="tar" data-name="xxxx" data-age="23" data-h-y='hy'>1111div>
1.data()方式
 $(document).on('click','#tar',function(){
 //获取data-属性值 
 //如果是用data-h-y这种形式 多个连接符 使用驼峰的形式获取 hY
	  console.log($(this).data()); //{age: 23,hY: "hy",name: "xxxx"}
      console.log($(this).data('age')); //23
      console.log($(this).data('hY'));//hy
      console.log($(this).data('name'));//xxxx

//设置data-属性值
	  $(this).data('h-y','cat'); //cat
      $(this).data('age','66'); //66
      $(this).data('name','yyyy'); //yyyy
      console.log($(this).data()); 
})
2.dataset方式
 $(document).on('click','#tar',function(){
 //获取data-属性值 
 //如果是用data-h-y这种形式 多个连接符 使用驼峰的形式获取 hY
 //  获取data-属性值
      console.log(this.dataset); //{age: 23,hY: "hy",name: "xxxx"}
      console.log(this.dataset.age); //23
      console.log(this.dataset.hY);//hy
      console.log(this.dataset.name);//xxxx

 //设置data-属性值
      this.dataset.hY = 'cat'; //cat  
      this.dataset.age = 66; //66  
      this.dataset.name = 'yyyy'; //yyyy  
      console.log(this.dataset);
})
3.attr()方式 需要获取/设置属性全称 data-xxxx
$(document).on('click', '#tar', function () {
//获取data-属性值 
      console.log($(this).attr('data-name'))//xxxx
//设置data-属性值
      $(this).attr('data-name','yyyy')//yyyy
})
几个方式一起联用
 $(document).on('click','#tar',function(){
        this.dataset.setval = 'setval';
        $(this).attr('data-attrval','attrval')
        $(this).data('dataval','dataval');

        console.log(this.dataset);
        console.log($(this).data());
      })

data-*的赋值与获取_第1张图片
data()可以获取到所有的属性值 ,dataset无法获取到通过data()设置的属性值

总结

  1. dataset和data()可以直接获取data-后面的属性名直接获取和赋值属性,attr() 需要获取属性全称 data-xxxx进行属性的设置和获取。
  2. data()可以获取到所有的属性值 ,dataset无法获取到通过data()设置的属性值

你可能感兴趣的:(常见问题)