获取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-*属性值相关推荐

java高效获取内部类属性值_Java高级特性：内部类
内部类是什么内部类是指在一个外部类的内部再定义一个类.内部类作为外部类的一个成员,并且依附于外部类而存在的.内部类可为静态,可用protected和private修饰(而外部类只能使用public和 ...
php xml获取标签属性,php获取xml属性值
php获取xml属性值 $dom = new DOMDocument(); if (!$dom->load('attr.xml')) { echo "load books.xml fa ...
java socket中属性详解_前端开发：关于Vue组件中的data属性值是函数而不是对象的详解...
最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象.首先来了解一下Vue组件的使用理念:在Vue组件使用 ...
无障碍开发（五）之设置获取无障碍属性值
设置获取无障碍属性值为了跨浏览器兼容,总是使用WAI-ARIA属性解析来访问和修改ARIA属性,例如object.setAttribute("aria-valuenow", ne ...
php 获取css值,如何通过JS获取CSS属性值
JS获取CSS属性 #f{background-color:#FF0000;} var o = document.getElementById('f'); document.write(o.style ...
java 获取对象属性值为空或者非空的属性名称
目录 1. 获取对象属性值为空的属性名称 2. 复制对象非空属性值 1. 获取对象属性值为空的属性名称 /** * @Title: getNullPropertyNames* @Description ...
js获取css属性值的方法
js操作获取dom元素的样式属性值 obj.style: 它只能够获取通过style设置的元素CSS属性值: 在html标签内通过style设置行内属性通过.dom.style.width=&quo ...
xpath获取标签属性值
html <a href='www.some.com'><span>hello </span>world</a> #获取a标签下的文本 xpath(&q ...
react 子组件获取变量属性值
刚刚遇到一个问题:子组件属性值绑定了变量,但是在子组件的componentDidMoiunt中拿到的值始终是undefinded.如下: 1 <PieInfo 2 title='有效病案' 3 ...
Redis中哈希hash数据类型（增加修改（设置单一属性、设置多个属性）、获取（获取键所有属性、获取单一属性值、获取多个属性值）、删除、使用hash可能出现的问题）
hash⽤于存储对象,对象的结构为属性.值值的类型为string [应用:如购物车内某个宝贝的所有属性] [help hset] 1. 增加.修改 1.1 设置单个属性 hset key fiel ...

获取data-*属性值

获取data-*属性值相关推荐

最新文章

热门文章