6.属性.html 918 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. <div data-name="Box1" data-aa-nn="first-nn">这是一个盒子</div>
  10. <!--
  11. 给元素自定义属性
  12. 1.box.dataset.属性名 = 属性值
  13. 2.box.setAttribute('属性名',属性值)
  14. 读取:
  15. 1.box.dataset.属性名
  16. 2.box.getAttribute('属性名')
  17. -->
  18. <script>
  19. var box = document.querySelector("div");
  20. console.log(box)
  21. box.dataset.index = 1;
  22. box.dataset.sex = '女';
  23. box.setAttribute("data-age",10);
  24. box.setAttribute("ss",20)
  25. console.log(box.dataset.index,'index')
  26. // 驼峰命名法读取
  27. console.log(box.dataset.aaNn,'aa')
  28. console.log(box.getAttribute("name"))
  29. </script>
  30. </body>
  31. </html>