9_dataset.html 888 B

1234567891011121314151617181920212223242526272829303132
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <!-- dataset属性 格式: data-自定义的属性名 -->
  10. <div id="box">
  11. <ul>
  12. <li data-index="0" data-id="1001">a</li>
  13. <li data-index="1" data-id="1002">b</li>
  14. <li data-index="2" data-id="1003">c</li>
  15. <li data-index="3" data-id="1004">d</li>
  16. <li data-index="4" data-id="1005">e</li>
  17. </ul>
  18. </div>
  19. <script>
  20. // 获取元素
  21. var lis = document.querySelectorAll("li");
  22. for(var i=0;i<lis.length;i++){
  23. lis[i].onclick = function(){
  24. var index = this.dataset.index;
  25. console.log(this.dataset.id);
  26. }
  27. }
  28. </script>
  29. </body>
  30. </html>