当前位置:首页 > CSS > 关键词 > jQuery > 正文

jQuery获取data-*属性值的四种方法

jQuery获取data-*属性值的四种方法

一: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

本文属原创,转载请注明原文:https://www.zhimatong.com/jiaocheng/217.html

为保证教程的实用性及扩大知识面覆盖,如果您有相似问题而未解决,可联系在线客服免费技术支持。

内容有用

联系
顾问

在线
客服
账号登录

没有账号?立即注册

忘记密码

登录即同意用户协议没有账号? 立即注册
账号注册
我已阅读并同意用户协议
立即注册
注册即同意用户协议已有账号? 立即登录
找回密码

操作步骤:邮箱验证->设置新密码

注册即同意用户协议已有账号? 立即登录