热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

js读取data属性

标签上有两个属性​​data-id​​​和​​data-user-name​​,需要通过js去获取123456789#user::before{content:att

标签上有两个属性​​data-id​​​ 和 ​​data-user-name​​, 需要通过js去获取










1

2

3

4

5

6

7

8

9



"user" data-id="666" data-user-name="Tom">



方式一:dataset










1

2

3

4

5

6

7

8

9

10

11

12

13

let user = document.querySelector("#user");

 

// 取值 中划线要转为驼峰命名法

console.log(user.dataset.id); // 666

console.log(user.dataset.userName); // Tom

// 赋值

user.dataset.id = 777;

user.dataset.userName = "Jack";

// 新增属性

user.dataset.age = 23;

// 删除属性

delete user.dataset.userName;

//



方式二: getAttribute/setAttribute/removeAttribute










1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

let user = document.querySelector("#user");

 

// 取值

console.log(user.getAttribute("data-id")); // 666

console.log(user.getAttribute("data-user-name")); // Tom

console.log(typeof user.getAttribute("data-id")); // string

// 赋值

user.setAttribute("data-id", 777);

 

// 新增属性

user.setAttribute("data-age", 23);

 

// 删除属性

user.removeAttribute("data-user-name");

//



方法三:jQuery.attr










1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17





方法四:jQuery.data


注意:$.data()的值进行修改并不会影响到DOM元素上的data-*属性的改变











1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17






推荐阅读
  • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
  • 本文探讨了如何使用Scrapy框架构建高效的数据采集系统,以及如何通过异步处理技术提升数据存储的效率。同时,文章还介绍了针对不同网站采用的不同采集策略。 ... [详细]
  • 本文探讨了互联网服务提供商(ISP)如何可能篡改或插入用户请求的数据流,并提供了有效的技术手段来防止此类劫持行为,确保网络环境的安全与纯净。 ... [详细]
  • iOS如何实现手势
    这篇文章主要为大家展示了“iOS如何实现手势”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“iOS ... [详细]
  • egg实现登录鉴权(七):权限管理
    权限管理包含三部分:访问页面的权限,操作功能的权限和获取数据权限。页面权限:登录用户所属角色的可访问页面的权限功能权限:登录用户所属角色的可访问页面的操作权限数据权限:登录用户所属 ... [详细]
  • C/C++ 应用程序的安装与卸载解决方案
    本文介绍了如何使用Inno Setup来创建C/C++应用程序的安装程序,包括自动检测并安装所需的运行库,确保应用能够顺利安装和卸载。 ... [详细]
  • 本文详细介绍如何在SSM(Spring + Spring MVC + MyBatis)框架中实现分页功能。包括分页的基本概念、数据准备、前端分页栏的设计与实现、后端分页逻辑的编写以及最终的测试步骤。 ... [详细]
  • Go语言实现文件读取与终端输出
    本文介绍如何使用Go语言编写程序,通过命令行参数指定文件路径,读取文件内容并将其输出到控制台。代码示例中包含了错误处理和资源管理的最佳实践。 ... [详细]
  • 如何高效渲染JSON数据
    本文介绍了在控制器中返回JSON结果的方法,并详细说明了如何利用jQuery处理和展示这些数据,为Web开发提供了实用的技巧。 ... [详细]
  • 本文详细介绍了 Node.js 中 OS 模块的 arch 方法,包括其功能、语法、参数以及返回值,并提供了具体的使用示例。 ... [详细]
  • 本文介绍了如何在 Oracle 数据库中查询重复数据,并提供了多种方法来筛选和删除重复记录,包括基于单个字段和多个字段的重复数据处理。 ... [详细]
  • 本文详细探讨了PHP中使用const和define定义常量的方法及其差异。了解这些区别有助于开发者根据具体需求选择合适的方式定义常量。 ... [详细]
  • 本文详细介绍了如何通过JDBC连接Hive进行数据操作,包括Hive服务的启动、相关依赖的配置以及具体代码示例,适合对Hive和JDBC有一定了解的开发者阅读。 ... [详细]
  • Python网络编程:深入探讨TCP粘包问题及解决方案
    本文详细探讨了TCP协议下的粘包现象及其产生的原因,并提供了通过自定义报头解决粘包问题的具体实现方案。同时,对比了TCP与UDP协议在数据传输上的不同特性。 ... [详细]
  • 本题提供了一个区间数组 intervals,其中每个区间 intervals[i] 包含两个整数 [starti, endi],并且所有 starti 值各不相同。任务是找到每个区间的右侧区间,即存在一个区间 j 满足 startj >= endi 并且 startj 是尽可能小的。返回一个数组,该数组包含每个区间右侧区间的索引;如果没有合适的右侧区间,则返回 -1。 ... [详细]
author-avatar
莫梓智
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有