常用到获取和赋值data-属性值的方法有一下几种
- data() 兼容ie8及以上
- dataset 兼容ie10+
- attr()
<div id="tar" data-name="xxxx" data-age="23" data-h-y='hy'>1111</div>
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()可以获取到所有的属性值 ,dataset无法获取到通过data()设置的属性值
总结
- dataset和data()可以直接获取data-后面的属性名直接获取和赋值属性,attr() 需要获取属性全称 data-xxxx进行属性的设置和获取。
- data()可以获取到所有的属性值 ,dataset无法获取到通过data()设置的属性值