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

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

[复制链接]
查看2696 | 回复1 | 2019-8-21 07:30 | 显示全部楼层 |阅读模式
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-*属性。
admin | 2019-8-21 07:32 | 显示全部楼层
示例使用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>
复制代码

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

UID
1
贡献
387
丢币
38902
主题
4607
回帖
116
注册时间
2018-9-25
最后登录
2024-3-24