怎么获取HTML5自定义数据属性data的值

很多做web开发的小伙伴,不知道怎么使用HTML5的data属性,下面小编就将操作方法演示给大家,供大家参考学习!

东西/原料

  • 电脑:win7,64位
  • 软件:HbuilderX

方式/步调

  1. 1

    打开开辟东西,新建一个HTML文件(为了便利给大师演示)

  2. 2

    在HTML标签上设置data属性:

    语法:data-*

  3. 3

    利用原生JS获取自界说数据属性的值

    方式:.getAttribute()

    例子: document.getElementById("demo1").getAttribute("data-num")

  4. 4

    打开浏览器开辟者东西,点击【console】可以看到我当作功的获取到data的值了

  5. 5

    利用jquery获取自界说数据属性的值

    方式:.attr() 或.data()

    例子:

    1、var a = $("#demo1").attr("data-type");

    2、var b = $("#demo2").data("type");

  6. 6

    打开浏览器开辟者东西,点击console查看获取环境:

方式总结:

  1. 1

    1、新建一个HTML文件

    2、在HTML标签上设置data属性

    3、利用原生JS:getAttribute()方式获取自界说数据属性的值

    4、利用jquery方式:attr() 或data()获取自界说数据属性的值

    5、打开浏览器开辟者东西查抄获取环境

注重事项

  • tips1:本教程设置的参数只是为了便利给大师演示,现实环境现实开辟!
  • tips2:本教程供给了,JQ或原生JS两种方式,按照需求选择!
  • 发表于 2020-01-20 20:01
  • 阅读 ( 839 )
  • 分类:其他类型

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

0 篇文章

作家榜 »

  1. xiaonan123 189 文章
  2. 汤依妹儿 97 文章
  3. luogf229 46 文章
  4. jy02406749 45 文章
  5. 小凡 34 文章
  6. Daisy萌 32 文章
  7. 我的QQ3117863681 24 文章
  8. 华志健 23 文章

联系我们:uytrv@hotmail.com 问答工具