第33天：封装自己的class类

最新推荐文章于 2024-05-27 18:36:34 发布

lelara

最新推荐文章于 2024-05-27 18:36:34 发布

阅读量147

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/lelara/article/details/84577725

版权

javascript 专栏收录该内容

68 篇文章 1 订阅

订阅专栏

封装自己的类类，实现浏览器兼容。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>封装自己的class类</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10             background: pink;
11             margin:10px;
12         }
13     </style>
14     <script>
15         window.onload=function(){
16             //封装自己的class类名
17             function getClass(classname,id) {
18                 //如果浏览器支持，则直接返回
19                 if(document.getElementsByClassName){
20                     //有id
21                     if(id){
22                         var eleId=document.getElementById(id);
23                         return eleId.getElementsByClassName(classname);
24                     }else{//没有id的情况
25                         return document.getElementsByClassName(classname);
26 
27                     }
28                 }
29                 //不支持的情况
30                 if(id){
31                     var eleId=document.getElementById(id);
32                     var dom=eleId.getElementsByTagName("*");
33                 }else{
34                     var dom=document.getElementsByTagName("*");
35                 }
36 
37                     var arr=[];
38                     for(var i=0;i<dom.length;i++){
39                         var txtarr=dom[i].className.split(" ");
40                         for(var j=0;j<txtarr.length;j++){
41                             if(txtarr[j]==classname){
42                                 arr.push(dom[i]);
43                             }
44                         }
45                     }
46                 return arr;
47             }
48             //console.log(getClass("test","one").length);
49             //测试
50             /*var aa=getClass("test","one");
51             for(var i=0;i<aa.length;i++){
52                 aa[i].style.backgroundColor="blue";
53             }*/
54         }
55     </script>
56 </head>
57 <body>
58 <div class="test" ></div>
59 <div class="demo"></div>
60 <div class=" demo test"></div>
61 <div id="one">
62     <div class="demo test"></div>
63     <div class=" test"></div>
64     <div class="demo test"></div>
65 </div>
66 <div></div>
67 </body>
68 </html>