请选择 进入手机版 | 继续访问电脑版

自丢网

 找回密码
 立即注册

html5之data-属性使用方法教程

[复制链接]
作者: admin(管理员) | 丢币: 38528 (丢币充值) | 查看: 210| 回复: 1 | 发表于 2019-8-21 07:30:55 | 显示全部楼层 |阅读模式
html5之data-属性使用方法教程案例分析:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <ul>
  9.     <li data-animal-type="bird">猫头鹰</li>
  10.     <li data-animal-type="fish">鲤鱼</li>
  11.     <li data-animal-type="spider">蜘蛛</li>
  12. </ul>
  13. </body>
  14. </html>
复制代码
使用data-属性可以自定义用户数据。

提示:所有主流浏览器都支持data-*属性。
推荐给好友: [复制链接]

上一篇:html5之contextmenu属性使用方法教程
下一篇:html5之draggable属性使用方法教程
楼主热帖
回复

使用道具 举报

admin(管理员) | 丢币: 38528 (丢币充值) | 发表于 2019-8-21 07:32:08 | 显示全部楼层
示例使用javascript脚本访问每个列表项目的type属性值。
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <ul>
  9.     <li data-animal-type="bird">猫头鹰</li>
  10.     <li data-animal-type="fish">鲤鱼</li>
  11.     <li data-animal-type="spider">蜘蛛</li>
  12. </ul>
  13. <script>
  14. var lis = document.getElementsByTagName("li");
  15. for(var i=0; i<lis.length; i++){
  16.         console.log(lis[i].dataset.animalType);
  17. }
  18. </script>
  19. </body>
  20. </html>
复制代码

回复

使用道具 举报

网站地图|Archiver|手机版|百度统计|( 粤ICP备17166275号 )自丢网

部分资源来源于互联网,如有侵权请邮寄联系站长处理(515138@qq.com)

Powered by 自丢网

Copyright © 2017-2020, WWW.ZIDIU.COM

快速回复 返回顶部 返回列表