第33天：封裝自己的class類
阿新 • • 發佈：2017-09-16
沒有 round oct dom txt tel 直接 div nload
封裝自己的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>
第33天：封裝自己的class類