欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

自定义方法，实现通过类名获取对象集合

程序员文章站 2022-03-13 13:55:16
...
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.     <title>自定义方法，实现通过类名获取对象集合</title>
    8. 

    9. 

  9.     <style>
    10. 

  10.         .one{
    11. 

  11.             width:500px;
    12. 

  12.             height:500px;
    13. 

  13.             background-color: rgb(112, 236, 168);
    14. 

  14.             line-height: 100px;
    15. 

  15.                    }
    16. 

  16.     </style>
    17. 

  17. </head>
    18. 

  18. <body>
    19. 

    20. 

  20.     <div class="one">
    21. 

  21.         <div class="one1">111122</div>
    22. 

  22.         <div class="one2  one1">3333444</div>
    23. 

  23.         <div class="one1">5555666。</div>
    24. 

  24.         <div class="three">7777888</div>
    25. 

  25.         <div class="three2">999</div>
    26. 

  26.     </div>
    27. 

    28. 

  28.     <script>
    29. 

    30. 

  30.           var ones = document.getElementsByClassName('one1');
    31. 

  31.           console.log(ones);
    32. 

    33. 

  33.           for(var i = 0; i < ones.length; i++){
    34. 

    35. 

  35.             ones[i].style.backgroundColor="red";
    36. 

  36.             ones[i].style.color="blue";
    37. 

    38. 

  38.           }
    39. 

    40. 

  40.     </script>
    41. 

  41. </body>
    42. 

  42. </html>
    43.

自定义方法，实现通过类名获取对象集合

上一篇： MySQL监控-Datadog数据库监控调研

下一篇： 避坑指南：分享云虚拟主机选择心得及使用感受

推荐阅读