编程 Javascript

js 获取html5的data属性实现方法

Posted in Javascript onJuly 28, 2017

我以前一直以为只能用jquery的data()来获取

哈哈是我太弱了

<!DOCTYPE html>
<html>

<head>
  <title>dataset</title>
  <meta charset="utf-8">
</head>

<body>
  <div id='div' data-index='demo'>
  </div>
</body>
<script type="text/javascript">
var a = document.getElementById('div');
console.log(a)
console.log(a.dataset.index)//demo
</script>

</html>

直接用dataset就可以获取到DOM元素的data属性

好吧，还可以用js的获取属性的方法getAttribute()

a.getAttribute('data-index')

==>"demo"

以上这篇js 获取html5的data属性实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

js 获取html5的data属性实现方法

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS 字符串连接[性能比较]

May 10 Javascript

判断javascript的数据类型(示例代码)

Dec 11 Javascript

JavaScript实现Java中StringBuffer的方法

Feb 09 Javascript

js实现的简单图片浮动效果完整实例

May 10 Javascript

Bootstrap和Angularjs配合自制弹框的实例代码

Aug 24 Javascript

JAVA Web实时消息后台服务器推送技术---GoEasy

Nov 04 Javascript

SelecT下拉框选中和取值的解决方法

Nov 22 Javascript

React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能

May 26 Javascript

解决webpack打包速度慢的解决办法汇总

Jul 06 Javascript

jQuery实现的点击按钮改变样式功能示例

Jul 21 jQuery

详解vue中多个有顺序要求的异步操作处理

Oct 29 Javascript

Vue实现页面添加水印功能

Nov 09 Javascript

jQuery获取table表中的td标签(实例讲解)

Jul 28 #jQuery

浅谈JS中的常用选择器及属性、方法的调用

Jul 28 #Javascript

js原生代码实现轮播图的实例讲解

Jul 28 #Javascript

js弹性势能动画之抛物线运动实例详解

Jul 27 #Javascript

js学习总结之dom2级事件基础知识详解

Jul 27 #Javascript

Angular指令之restict匹配模式的详解

Jul 27 #Javascript

Angularjs的$http异步删除数据详解及实例

Jul 27 #Javascript

You might like

DC四月将推出百页特刊漫画纪念小丑诞生80周年

2020/04/09 欧美动漫

php中的观察者模式

2010/03/24 PHP

PHP的博客ping服务代码

2012/02/04 PHP

一个很酷的拖动层的js类，兼容IE及Firefox

2009/06/23 Javascript

Jquery Validate 正则表达式实用验证代码大全

2013/08/23 Javascript

JS 数字转换研究总结

2013/12/26 Javascript

javascript动态判断html元素并执行不同的操作

2014/06/16 Javascript

js数组的基本操作(很全自己整理的)

2014/10/16 Javascript

Bootstrap每天必学之折叠

2016/04/12 Javascript

javascript 初学教程及五子棋小程序的简单实现

2017/07/04 Javascript

jQuery ajax调用webservice注意事项

2017/10/08 jQuery

vue+jquery+lodash实现滑动时顶部悬浮固定效果

2018/04/28 jQuery

vue左侧菜单,树形图递归实现代码

2018/08/24 Javascript

echarts多条折线图动态分层的实现方法

2019/05/24 Javascript

Ant Design Pro 之 ProTable使用操作

2020/10/31 Javascript

python实现下载文件的三种方法

2017/02/09 Python

python打包压缩、读取指定目录下的指定类型文件

2018/04/12 Python

python实现比较文件内容异同

2018/06/22 Python

Python3中内置类型bytes和str用法及byte和string之间各种编码转换问题

2018/09/27 Python

基于django channel实现websocket的聊天室的方法示例

2019/04/11 Python

简单了解python关系（比较）运算符

2019/07/08 Python

python3.7 使用pymssql往sqlserver插入数据的方法

2019/07/08 Python

Tensorflow 实现释放内存

2020/02/03 Python

Python数组并集交集补集代码实例

2020/02/18 Python

Pyqt5 关于流式布局和滚动条的综合使用示例代码

2020/03/24 Python

Ubuntu16安装Python3.9的实现步骤

2020/12/15 Python

手把手教你用纯css3实现轮播图效果实例

2017/05/04 HTML / CSS

欧洲最大的滑雪假期供应商之一：Sunweb Holidays

2018/01/06 全球购物

地球上最先进的胡子和头发修剪器：Bevel

2018/01/23 全球购物

联谊活动策划书

2014/01/26 职场文书

高中班级口号

2014/06/09 职场文书

2019最新版劳务派遣管理制度

2019/08/16 职场文书

Redis性能监控的实现

2021/07/09 Redis

修改并编译golang源码的操作步骤

2021/07/25 Golang

Redis集群新增、删除节点以及动态增加内存的方法

2021/09/04 Redis

linux下安装redis图文详细步骤

2021/12/04 Redis