博主信息
博文 119
粉丝 3
评论 1
访问量 121182
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
自定义方法通过类名获取对象集合
赵大叔
原创
813人浏览过

实例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. .one {
  10. width:300px;
  11. height:300px;
  12. background-color:red;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div class="one">hhhhhhhhh</div>
  18. <div class="one three">eeeeeeeeeeee</div>
  19. <div class="one two">llllllllllllll</div>
  20. <div class="one two three">pppppppppppp</div>
  21. <h3 class="one">11111111111111</h3>
  22. <h3>2222222222222</h3>
  23. <p class="one">33333333333333</p>
  24. </body>
  25. </html>
  26. <script>
  27. var ones = gclass("one");
  28. console.log(ones);
  29. for(var i = 0; i < ones.length; i++) {
  30. ones[i].style.backgroundColor = "green";
  31. }
  32. // 通过类名获取所有元素的方法
  33. function gclass(className, tagName) {
  34. // var alltags = document.all;
  35. var alltags = document.getElementsByTagName(tagName || "*");
  36. var arr = new Array();
  37. for(let i = 0; i < alltags.length; i++) {
  38. // one two
  39. // split把一个字符串分割成字符串数组:
  40. var one = className.split(" ");
  41. var two = alltags[i].className.split(" ");
  42. if(isHasArray(one, two)) {
  43. arr[arr.length] = alltags[i];
  44. }
  45. }
  46. //返回所有类元素集合
  47. return arr;
  48. }
  49. // 判断一个数组中的所有元素是否在另外的一个数组中存在
  50. function isHasArray(one, two) {
  51. if(two.length < one.length){
  52. return false;
  53. }
  54. var flag = 0;
  55. for(let i=0; i<one.length; i++) {
  56. for(let j=0; j<two.length; j++) {
  57. if(one[i]==two[j]){
  58. flag++;
  59. break;
  60. }
  61. }
  62. }
  63. return flag == one.length;
  64. }
  65. </script>

结果展示

批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学