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

 更新时间:2017年07月28日 07:58:16   投稿:jingxian  
下面小编就为大家带来一篇js 获取html5的data属性实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

我以前一直以为只能用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属性实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 基于element UI input组件自行封装“数字区间”输入框组件的问题及解决

    基于element UI input组件自行封装“数字区间”输入框组件的问题及解决

    这篇文章主要介绍了基于element UI input组件自行封装“数字区间”输入框组件,实现代码可以分为两块一块为组件的封装代码,一块为文中实现效果的演示代码,对element UI数字区间输入组件相关知识感兴趣的朋友一起看看吧
    2022-05-05
  • JavaScript实现自动变换表格边框颜色

    JavaScript实现自动变换表格边框颜色

    用JavaScript控制表格边框不停的变换颜色,记得以前经常看到这种效果,代码也不复杂,直接复制就可用啦! 可自定义颜色,有需要的小伙伴可以参考下。
    2015-05-05
  • JavaScript中实现单体模式分享

    JavaScript中实现单体模式分享

    这篇文章主要介绍了JavaScript中实现单体模式分享,单体模式的定义:单体是一个用来划分命名空间并将一批相关方法和属性组织在一起的对象,如果它能够被实例化,那么只能被实例化一次,需要的朋友可以参考下
    2015-01-01
  • JavaScript中callee和caller的区别与用法实例分析

    JavaScript中callee和caller的区别与用法实例分析

    这篇文章主要介绍了JavaScript中callee和caller的区别与用法,结合实例形式分析了javascript中callee和caller的功能、区别、用法及操作注意事项,需要的朋友可以参考下
    2019-06-06
  • js如何根据class获取元素并且点击元素详解

    js如何根据class获取元素并且点击元素详解

    这篇文章主要给大家介绍了关于js如何根据class获取元素并且点击元素的相关资料,获取元素集合的方法有很多,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-04-04
  • JS实现区分中英文并统计字符个数的方法示例

    JS实现区分中英文并统计字符个数的方法示例

    这篇文章主要介绍了JS实现区分中英文并统计字符个数的方法,涉及JavaScript事件响应、正则匹配及数值运算相关操作技巧,需要的朋友可以参考下
    2018-06-06
  • javascript算法学习实现代码

    javascript算法学习实现代码

    有1到100000共10万个数。从中随机抽走两个。再把原来的数字顺序打乱。如何快速找到被抽走的两个数
    2011-04-04
  • 基于D3.js实现时钟效果

    基于D3.js实现时钟效果

    这篇文章主要为大家详细介绍了基于D3.js实现时钟效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • 基于JavaScript实现控制下拉列表

    基于JavaScript实现控制下拉列表

    这篇文章主要介绍了基于JavaScript实现控制下拉列表,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • JavaScript实现文字与图片拖拽效果的方法

    JavaScript实现文字与图片拖拽效果的方法

    这篇文章主要介绍了JavaScript实现文字与图片拖拽效果的方法,涉及javascript操作文字与图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02

最新评论