编程 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 相关文章推荐

尽可能写"友好"的"Javascript"代码

Jan 09 Javascript

ExtJS的FieldSet的column列布局

Nov 20 Javascript

Javascript学习笔记4 Eval函数

Jan 11 Javascript

JavaScript 设计模式富有表现力的Javascript（一）

May 26 Javascript

jquery1.5.1中根据元素ID获取元素对象的代码

Apr 02 Javascript

Jquery 表单验证类介绍与实例

Jun 09 Javascript

jQuery中事件与动画的总结分享

May 24 Javascript

vscode 配置vue+vetur+eslint+prettier自动格式化功能

Mar 23 Javascript

Vue.js获取手机系统型号、版本、浏览器类型的示例代码

May 10 Javascript

vue路由结构可设一层方便动态添加路由操作

Aug 31 Javascript

vue如何批量引入组件、注册和使用详解

May 12 Vue.js

vue 实现上传组件

May 31 Vue.js

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

索尼ICF-SW100收音机评测

2021/03/02 无线电

百事可乐也出咖啡了双倍咖啡因双倍快乐

2021/03/03 咖啡文化

thinkPHP框架可添加js事件的分页类customPage.class.php完整实例

2017/03/16 PHP

yii2.0整合阿里云oss上传单个文件的示例

2017/09/19 PHP

php微信公众号开发之答题连闯三关

2018/10/20 PHP

用Laravel轻松处理千万级数据的方法实现

2020/12/25 PHP

通过Mootools 1.2来操纵HTML DOM元素

2009/09/15 Javascript

用Jquery实现可编辑表格并用AJAX提交到服务器修改数据

2009/12/27 Javascript

JS中用childNodes获取子元素换行会产生一个子元素

2016/12/08 Javascript

基于JavaScript实现前端数据多条件筛选功能

2020/08/19 Javascript

switchery按钮的使用方法

2017/12/18 Javascript

微信小程序批量监听输入框对按钮样式进行控制的实现代码

2019/10/12 Javascript

python字符串排序方法

2014/08/29 Python

完美解决python遍历删除字典里值为空的元素报错问题

2016/09/11 Python

Python实现注册登录系统

2017/08/08 Python

python不换行之end=与逗号的意思及用途

2017/11/21 Python

django1.11.1 models 数据库同步方法

2018/05/30 Python

django的settings中设置中文支持的实现

2019/04/28 Python

python中删除某个元素的方法解析

2019/11/05 Python

python中dict()的高级用法实现

2019/11/13 Python

python time()的实例用法

2020/11/03 Python

纯CSS3实现带动画效果导航菜单无需js

2013/09/27 HTML / CSS

HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形

2014/06/23 HTML / CSS

世界最大的票务市场：viagogo

2017/02/16 全球购物

英国品牌男装折扣网站：Brown Bag

2018/03/08 全球购物

巴西补充剂和维生素购物网站：Natue

2019/06/17 全球购物

实习教师自我鉴定

2013/12/09 职场文书

学习党课思想汇报

2013/12/29 职场文书

写给女生的道歉信

2014/01/08 职场文书

我的中国心演讲稿

2014/09/04 职场文书

“向国旗敬礼”主题班会活动设计方案

2014/09/27 职场文书

农民工工资承诺书大全

2015/05/04 职场文书

刑事附带民事诉讼答辩状

2015/05/22 职场文书

python 实现德洛内三角剖分的操作

2021/04/22 Python

Vue Element UI自定义描述列表组件

2021/05/18 Vue.js

Ruby GDBM操作简介及数据存储原理

2022/04/19 Ruby