第33天：封装自己的class类
封装自己的class类，实现浏览器兼容。
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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-09-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读