请选择 进入手机版 | 继续访问电脑版
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-*属性。
推荐给好友: [复制链接]
推荐文章
回复

使用道具 举报

相关文章

精彩评论1

示例使用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>
复制代码

回复

使用道具 举报

发布主题
  • 今日更新:0 昨日更新:35
  • 会员总数:375 模板总数:8996
打造全国最大建站模板下载平台
在线技术QQ

515138

周一至周日9:00-23:00

如有侵权请联系我们

515138@qq.com 在线QQ咨询

微信扫码关注我们