js获取data-*属性值，及赋值

最新推荐文章于 2022-05-23 09:59:50 发布

漂移的电子

最新推荐文章于 2022-05-23 09:59:50 发布

阅读量1.2w

点赞数 2

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_40030173/article/details/106215116

版权

js 专栏收录该内容

51 篇文章

订阅专栏

本文详细介绍如何使用jQuery和原生JS获取及设置HTML元素的data-属性值，包括使用$.data(), $.attr()以及dataset对象的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js获取data-属性、及设置赋值，此处以a标签为例：(data- 小写)

<a href="javascript:;" data-id="2020" id="demo0">data0</a>
<a href="javascript:;" data-name-id="202005" id="demo1">data1</a>
<a href="javascript:;"  id="demo2">data2</a>

一、jq获取data属性值的两种方法：

$("#demo0").data('id')   
//或者
$("#demo0").attr('data-id')

二、js获取data属性值

document.getElementById('demo1').dataset.nameId;

三、js设置赋值data,并获取

document.getElementById('demo2').dataset.nameId= '20200519';
var q= document.getElementById('demo2').dataset.nameId;

//console.log(q)  //202005

参考：https://blog.csdn.net/lucky541788/article/details/81774046

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

漂移的电子

关注关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

设置获取data-*属性值

a97156000的博客

08-15

1025

html代码如下： <div id="getId" data-id="122" data-vice-id="11">获取id</div > 需要获取的就是data-id和dtat-vice-id的值一：getAttribute()方法 const getId = document.getElementById('getId'); ...

javascript 原生方法读取html5自定义属性data-*,jQ获取html5的data-*属性

weixin_32223631的博客

05-31

870

data-*自定义数据属性HTML5规定可以为元素添加非标准型的属性，只需添加前缀data-，这些属性可以随意添加，随意命名，目的是为元素提供与渲染无关的信息，或提供语义信息。js获取data-*的方式通过dataset属性访问HTML代码 var div = document.getElementById("myDiv");var age= div.dataset.age;//获取data-ag...

参与评论您还未登录，请先登录后发表或查看评论

JS实现获取自定义属性data值的方法示例

10-17

主要介绍了JS实现获取自定义属性data值的方法,结合实例形式较为详细的分析了javascript针对自定义属性data的相关操作技巧,需要的朋友可以参考下

js data-赋值

qq_39580489的博客

05-17

391

data-赋值 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=100, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document&l

js,jQuery获取html5的data-*属性

weixin_33777877的博客

06-22

186

今天做项目的时候发现一个坑，关于jQuery获取data-*属性的方法data()，特写此篇来记录。 data-*自定义数据属性 HTML5规定可以为元素添加非标准型的属性，只需添加前缀data-，这些属性可以随意添加，随意命名，目的是为元素提供与渲染无关的信息，或提供语义信息。 js获取data-*的方式通过dataset属性访问...

使用JS和Jquery 给data属性赋值和取值

Colbru的博客

09-11

1万+

js: 获取标签元素data-*属性值的方法

彭世瑜的博客

05-23

7017

标签上有两个属性data-id 和 data-user-name, 需要通过js去获取 <style> #user::before { content: attr(data-id); } #user::after { content: attr(data-user-name); } </style> <div id="user" data-id="666" data-user-name="Tom"></div> 方式

详解HTML5 data-* 自定义属性

12-30

在jQuery的attr与prop提到过...使用data-*可以解决自定义属性混乱无管理的现状。读写方式 data-*有两种设置方式，可以直接在HTML元素标签上书写 <div id=test data-age=24> Click Here 其中的data-age就是一种自定

html5的自定义data-*属性与jquery的data()方法的使用

09-28

从jQuery 1.4.3版本开始，.data()方法有了改进，提供了一个简洁的方式来处理data-*属性，它不仅能够读取，还能够自动将字符串形式的属性值转换为JavaScript数据类型，如数字和布尔值。例如，给定一个拥有data-myid...

html5的自定义data-*属性和jquery的data()方法的使用示例

10-26

例如，要获取上述`<div>`元素的`data-custom-data`属性值，可以使用以下代码： ```javascript var customData = jQuery('#example').data('custom-data'); console.log(customData); // 输出 "someValue" ``` `....

js——获取data-id 的值

Sunshine0508的博客

08-01

3937

js document.getElementById('fun').dataset.appId = 'hsfun' // <div data-app-id="hsfun"></div> var f2 = document.getElementById('fun').dataset.appId // hsfun jquery var f1 = $(this).dat...

[js] 获取自定义属性data-

qq_14993591的博客

10-06

1871

Html5规范中规定自定义属性需要添加前缀data-,目的是提供与渲染无关的信息。读取的时候是通过dataset对象，使用”.”来获取属性，需要去掉data-前缀 <div id="content" data-age="18">12345</div> var content= document.getElementById('content'); alert(content.dataset.age) //jquery $('#content').data('age');//

获取data-*属性值

热门推荐

天空影

12-29

5万+

获取data-*属性值 c

js，jQuery获取html5的data-*属性

webeliveyou的博客

07-14

274

data-*自定义数据属性 HTML5规定可以为元素添加非标准型的属性，只需要添加前缀data-，这些属性可以随意添加，命名，目的是为元素提供与渲染无关的信息，或提供语义信息。 js获取data-*的方式通过dataset属性访问 //HTML代码 <div id="myDiv" data-appid="123" data-myname="lsxj"></div>...

js data-自定义属性

handy_csdn的博客

05-17

1870

template <div class="dataCharacter" data-dataMsg="handy"> <ul> <li class="one" data-other-msg="one">1</li> <li class="two" data-other-msg="two">2</li> <li class="three" data-oter-msg="three

js——如何获取data-id中的值

肖的博客

08-17

3万+

转载出处：https://blog.csdn.net/ke3863834/article/details/76944265 一般data-id用于一些菜单栏的匹配，例如下面这个： 12 //一级菜单 &amp;lt;div class=&quot;wrap&quot; id=&quot;test&quot;&amp;gt; &amp;lt;

使用javascript 获取 data- 自定义属性

qq_36400099的博客

09-17

1830

HTML5 data-* 的读写方式一、data-* 有两种设置方式：1、可以直接在HTML元素标签上书写<div id="test" data-age="24"> Click Here </div>其中data-age 是一种自定义属性。2、通过javascript 操作HTML5中元素都会有一个dataset的属性，这是一个DOMStringMap类型的键值对集合var t

JS中使用"data-"开头的属性及data()方法实现自定义属性

大头之家

05-25

4万+

data-toggle 这种以 data- 开头的格式放在元素上表示元素携带的数据，如： 1 img id="img" src="small.jpg" data-bigimg="big.jpg" /> JQuery的 data() 方法可以直接操作，如： 1 2 //获取： var

div 定义一个 data-type 怎么获取data-type 属性值 示例代码

05-24

我们可以使用 JavaScript 中的 `getAttribute()` 方法来获取 `data-type` 属性的值。示例代码如下： ```html <div data-type="example">这是一个例子</div> ``` ```javascript const divElement = document.querySelector('div'); const dataTypeValue = divElement.getAttribute('data-type'); console.log(dataTypeValue); // 输出：example ``` 在上述示例代码中，首先通过 `document.querySelector()` 方法获取到页面中的 `<div>` 元素，然后使用 `getAttribute()` 方法获取 `data-type` 属性的值，并将其赋值给变量 `dataTypeValue`。最后通过 `console.log()` 方法打印出 `dataTypeValue` 的值。