下面就详细介绍四种方法获取data-*
属性的值
<li id="getId" data-id="" data-vice-id="">获取id</li>
需要获取的就是data-id
和 dtat-vice-id
的值
一:getAttribute()方法
const getId = document.getElementById('getId');
// //getAttribute()取值属性
console.log(getId.getAttribute("data-id"));//
console.log(getId.getAttribute("data-vice-id"));//11
// //setAttribute()赋值属性
getId.setAttribute("data-id","");
console.log(getId.getAttribute("data-id"));//
二:dataset()方法
//data-前缀属性可以在JS中通过dataset取值,更加方便
console.log(getId.dataset.id);//112
//data-vice-id连接取值使用驼峰命名法取值
console.log(getId.dataset.viceId);//11 //赋值
getId.dataset.id = "";//
getId.dataset.viceId--;//10 //新增data属性
getId.dataset.id2 = "";//100 //删除,设置成null,或者delete
getId.dataset.id2 = null;//null
delete getId.dataset.id2;//undefind
三:jquery data()方法
var id = $("#getId").data("id"); //
var viceId = $("#getId").data("vice-id"); //11
//赋值
$("#getId").data("id","");//
四:jquery attr()方法
var id = $("#getId").attr("data-id"); //
var viceId = $("#getId").attr("data-vice-id"); //11
//赋值
$("#getId").attr("data-id","");//
这样以后做详情页就可以愉快的玩耍了