获取data-*属性值
Posted niyl
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了获取data-*属性值相关的知识,希望对你有一定的参考价值。
下面就详细介绍四种方法获取data-*
属性的值
<li id="getId" data-id="122" data-vice-id="11">获取id</li>
需要获取的就是data-id
和 dtat-vice-id
的值
一:getAttribute()方法
const getId = document.getElementById(‘getId‘); // //getAttribute()取值属性 console.log(getId.getAttribute("data-id"));//122 console.log(getId.getAttribute("data-vice-id"));//11 // //setAttribute()赋值属性 getId.setAttribute("data-id","48"); console.log(getId.getAttribute("data-id"));//48
二:dataset()方法
//data-前缀属性可以在JS中通过dataset取值,更加方便 console.log(getId.dataset.id);//112 //data-vice-id连接取值使用驼峰命名法取值 console.log(getId.dataset.viceId);//11 //赋值 getId.dataset.id = "113";//113 getId.dataset.viceId--;//10 //新增data属性 getId.dataset.id2 = "100";//100 //删除,设置成null,或者delete getId.dataset.id2 = null;//null delete getId.dataset.id2;//undefind
三:jquery data()方法
var id = $("#getId").data("id"); //122 var viceId = $("#getId").data("vice-id"); //11 //赋值 $("#getId").data("id","100");//100
四:jquery attr()方法
var id = $("#getId").attr("data-id"); //122 var viceId = $("#getId").attr("data-vice-id"); //11 //赋值 $("#getId").attr("data-id","100");//100
这样以后做详情页就可以愉快的玩耍了
以上是关于获取data-*属性值的主要内容,如果未能解决你的问题,请参考以下文章